html {-webkit-text-size-adjust:100%;}
body {background-color: #fff; position: relative; margin: 0px; padding: 0px;}
* {margin:0; padding:0; border:0; outline:0; box-sizing: border-box;  font-family: sans-serif; color: #000;}
ul li {list-style-type: none;}
img{font-size: 0;}

/******** Font Size *********/
h1 {font-size: 32px; line-height: 36px; font-weight: normal;}
h2 {font-size: 28px; line-height: 34px; font-weight: normal;}
h3 {font-size: 24px; line-height: 30px; font-weight: normal;}
p {font-size: 20px; line-height: 30px; font-weight: normal;}
a {font-size: 20px; line-height: 30px; font-weight: normal; text-decoration: none;}

label {}
input[type="text"] {}
input[type="submit"] {}

sub, sup {font-size: 12px; line-height: 14px;}
h1 sub, h1 sup {font-size: 24px; line-height: 26px;}
h2 sub, h2 sup {font-size: 18px; line-height: 20px;}


/******** Color Catalogue *********/
.colorWhite {color: #fff;}
.colorBlack {color: #000;}

/*.whiteBackground {background-color: #fff;}*/
.whiteBackground {background: url(../images/pattern-background.png) repeat;}
.darkGreenBackground {background-color: #324F17;}

.pagerStyle{text-align:center;font-size:14px;line-height:25px;}
.pagerStyle img{display:inline !important;}

/******** Background Images *********/
.imgBackground {background-repeat: no-repeat; background-size: auto 100%; background-position: 100% 100%;}
.bodyBackground {background-repeat: no-repeat;background-attachment: fixed; background-position: center; background-size: cover; -webkit-background-size: cover;}
.loginPageBackground {background-image: url("../images/login-background.jpg");}
.patternBackground {background: url("../images/pattern-background.png") repeat;}


/******** Default Section (don't change) *********/
.clear {clear: both;}
.justDesktop {display: block;}
.justMobile {display: none;}
.relative {position: relative;}
.absolute {position: absolute;}
.hidden {display: none;}
.floatRight {float: right;}
.floatLeft {float: left;}
.text-center {text-align: center;}
.bold {font-weight: bold;}
.unbold {font-weight: normal;}
.fullwidth img {width: 100%;}
.centerPosition {position: relative; left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0);}
.innerBodyContainer {width: 100%; max-width: 1220px; margin: 0 auto; padding-left: 10px; padding-right: 10px;}
/*.innerContainer {padding: 30px; width: 100%;}*/
.hoverPointer {cursor: pointer;}
.hideOverflow {overflow: hidden;}
.rightAlign {text-align: right;}
.inline-block {display: inline-block;}
.inline {display: inline;}
.hangingSup {position: absolute; transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0);}
.tableBlock {display: table-cell; vertical-align: middle;}
.underline {text-decoration: underline;}
.upperCase {text-transform: uppercase;}
.lowerCase {text-transform: lowercase;}
.section{border:1px solid #ddd;}

.width50 {width: 50%;}

/******** Margin / Padding *********/
.marTop60 {margin-top: 60px;}
.marTop40 {margin-top: 40px;}
.marTop30 {margin-top: 30px;}
.marTop20 {margin-top: 20px;}
.marTop10 {margin-top: 10px;}
.marBot60 {margin-bottom: 60px;}
.marBot40 {margin-bottom: 40px;}
.marBot30 {margin-bottom: 30px;}
.marBot20 {margin-bottom: 20px;}
.marBot10 {margin-bottom: 10px;}
.noMarBot {margin-bottom: 0!important;}

.padTop60 {padding-top: 60px;}
.padTop40 {padding-top: 40px;}
.padTop30 {padding-top: 30px;}
.padTop20 {padding-top: 20px;}
.padTop10 {padding-top: 10px;}
.padBot60 {padding-bottom: 60px;}
.padBot40 {padding-bottom: 40px;}
.padBot30 {padding-bottom: 30px;}
.padBot20 {padding-bottom: 20px;}
.padBot10 {padding-bottom: 10px;}
.noPadBot {padding-bottom: 0!important;}

.leftPad5 {padding-left: 5%;}
.rightPad5 {padding-right: 5%;}
.rightPad25 {padding-right: 25%;}
.leftPad10 {padding-left: 10%;}
.leftPad15 {padding-left: 15%;}
.rightPad10 {padding-right:10%;}
.marRight {margin-right:1%;}
.marLeft {margin-left:1%;}

.pad10{padding:10px;}

/******** Css for Navigation *********/
/*#menuNav {width: 100%; background-color: #075025;height:30px;}*/
#menuNav {width: 100%; background-color: #fff;height:30px;}
.levelTwoNav, .levelThreeNav {display: none;}
#menuNav  ul > li {position: relative;}
/*#menuNav  ul > li:hover {background: #397D02; border-bottom: 1px solid #7CFC00;}*/
#menuNav  ul > li:hover { border-bottom: 1px solid blue;}
#menuNav  ul  li  a {padding: 7px; text-decoration:none; width: 100%; display: inline-block; font-size: 12px; line-height: 16px; color: #dddddd; font-weight: 700; cursor: pointer; color:#34055f}
#menuNav  ul > li:hover ul.levelTwoNav {display: block;}
li.has-sub:hover > ul.levelThreeNav {display: block;}
.levelTwoNav {position: absolute; top: 30px; background-color: #003300; min-width: 210px;z-index:9999;}
.levelThreeNav {position: absolute; margin-top: -30px; left: 100%; background-color: #003300; min-width: 210px;}
ul.levelOneNav > li  > a :before {content: "\f015";}
#menuNav ul li.has-sub > a {padding-right: 30px;}
#menuNav ul li.has-sub > a:before {position: absolute; margin-top: 3px; right: 14px; display: block; width: 2px; height: 8px; content: ''; background: #dddddd;}
#menuNav ul li.has-sub:hover > a:before {display: none;}
#menuNav ul li.has-sub > a:after {position: absolute; margin-top: -10px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: '';}
/*#menuNav  ul > li:hover > a {color: #000; }*/
.pheading {background-color:#1c2f31 !important}

/******** Css for Header *********/
#header {width: 100%;}
#header h1 {font: 700 30px/110% Montserrat, Arial, Helvetica, sans-serif; padding: 5px 0 5px 25px; color: #324F17; letter-spacing: 1px; text-shadow: 0px 0px 2px rgba(0,0,0,0.2);}
.avatar {width: 30px; height: 30px;/* margin: 18px 0 10px;*/}
.userProfile {display: none; height: auto; background: #ffffff; width: 170px; top: 58px; right: 0; z-index: 5; box-shadow: 0px 0px 4px rgba(0,0,0,0.4);}
.avatarContainer:hover .userProfile {display: block;}
.textBlock p, .textBlock a {font-size: 14px; line-height: 16px; color: #5e656b;}
.profilerow {padding: 10px 0;}
.imgBlock {padding: 0 10px;}
.profilerow:hover {background-color: #ececec;}
.topBorder {border-top: 1px solid #324F17;}
.userProfile:before {-moz-border-color: none; border-color: transparent transparent #324F17; border-style: solid; border-width: 10px; right: 10px; content: ""; display: block; height: 0; opacity: 1; width: 0; position: absolute; top: -20px;}
.logoImage {width: 100px;}


/******** Css for Body *********/
.bodyContainer {margin: 10px auto; border-radius: 20px; box-shadow: 0px 0px 4px rgba(0,0,0,0.4);}

/******** Css for Footer *********/
#footer {width: 100%; background-color: #324F17;}
#footer p {font-size: 12px; line-height: 16px;}

/******** Css for login Page *********/
#loginPage h1 {font-size: 42px; line-height: 45px; font-weight: 300; letter-spacing: 7px;}
#loginPage h2 {font-size: 32px; line-height: 35px; font-weight: 300;}
.loginBlock {width: 60%; max-width: 530px; margin: 0 auto; background: rgba(0, 0, 0, 0.7); padding: 30px 5%;}
#loginPage input[type="text"], .loginBlock input[type="password"], .loginBlock input[type="email"] { width: 100%; padding: 15px 10px; border: 2px solid #537b35; background-size: 25px; color: #fff; background: transparent;}
#loginPage input[type="text"] {background-image: url("../images/user.png"); background-repeat: no-repeat; background-position: 96% center;}
#loginPage input[type="password"] {background-image: url("../images/password.png"); background-repeat: no-repeat; background-position: 96% center;}
#loginPage input[type="email"] {background-image: url("../images/e-mail.png"); background-repeat: no-repeat; background-position: 96% center;}
.frgtPass {font-size: 15px; line-height: 18px;}
input[type="submit"] {font-size: 16px; padding: 10px 0; background-color: #537b35; color: #fff; border: none; border-radius: 0px; float: none; cursor: pointer; width: 130px;}
.registerBox{font-weight: 600; padding: 8px 20px; border: 1px solid #fff;}

/******** Css for Registration Page *********/
#RegPage h1 {font-size: 42px; line-height: 45px; font-weight: 300; letter-spacing: 7px;}
#RegPage h2 {font-size: 32px; line-height: 35px; font-weight: 300;}
.RegBlock {width: 60%; max-width: 700px; margin: 0 auto; background: rgba(0, 0, 0, 0.7); padding:25px 30px 10px 50px;}
#RegPage input[type="text"], .RegBlock input[type="password"], .RegBlock input[type="email"] { width: 48%; padding:15px 5px 14px 45px; border: 1px solid #537b35; background-size: 25px; color: #fff; background: transparent;}
#RegPage input[type="text"] {background-image: url("../images/user.png"); background-repeat: no-repeat; background-position: 2% center;}
#RegPage input[type="password"] {background-image: url("../images/password.png"); background-repeat: no-repeat; background-position: 2% center;}
#RegPage input[type="email"] {background-image: url("../images/e-mail.png"); background-repeat: no-repeat; background-position: 2% center;}
#RegPage input[type="mobile"] {background-image: url("../images/mobile.png"); background-repeat: no-repeat; background-position: 2% center;}
.frgtPass {font-size: 15px; line-height: 18px;}
#RegPage input[type="submit"] {font-size: 16px; padding: 10px 0; background-color: #537b35; color: #fff; border: none; border-radius: 0px; float: none; cursor: pointer; width: 130px;}
.registerBox{font-weight: 600; padding: 8px 20px; border: 1px solid #fff;}

#RegPage #userType {background-image: url("../images/user.png"); background-repeat: no-repeat; background-position: 2% center;  color: #fff;width: 94%; padding: 7px  5px 14px 37px; border: 1px solid #537b35; background-size: 25px;}

#userType select{width:100%; height:28px;  background-color: transparent;
    color: #fff;}


/************ Css for Home page **********/
body#homePage {background:linear-gradient(white, #d3d8e8) repeat scroll 0 0;}
.mainContainer {border: 2px solid #537b35;border-radius:5px;width:98%;margin:1% auto;}
/*.innerContainer ul li{padding: 5px 2%;}*/
.innerContainer main {min-width: 320px;}
.innerContainer section {display: none;padding: 2px 0 0;border-top: 1px solid #9d9d9d;}
.innerContainer input[type="radio"] {display: none;}
.innerContainer textarea {background-color: #ffffff;border: 1px solid #cccccc;box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);width:33%;}
.innerContainer input[type="text"] {border: 1px solid #cacaca;margin: 0 0 1rem;font-family: inherit;font-size: 1rem;color: #0a0a0a;background-color: #fefefe;
                                  box-shadow: inset 0 1px 2px rgba(10,10,10,0.1); border-radius: 3px;width: 33%;padding: 7px;}
.innerContainer label {display: inline-block;margin: 0 0 -1px;padding: 15px 25px;font-weight: 600;text-align: center;color: #000;border: 1px solid transparent;font-size: 12px;}
.innerContainer input:checked + label {color: #555;border: 1px solid #9d9d9d;border-top: 2px solid orange;border-bottom: 1px solid #fff;}
#tab0:checked ~ #content0,
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {display: block;}
.electronicTable h3 {width: 100%; font-size: 18px;line-height: 26px;font-weight: normal; padding: 5px;color: #fff;text-align:center;}
.innerContainer h3 {width: 100%; font-size: 18px;line-height: 26px;font-weight: normal; padding: 5px;color: #fff;text-align:center;background-color:#1c2f31}
.innerContainer img {display:block;margin:0 auto;}

.electronicTable select {width: 220px;background-color: #ffffff;border: 1px solid #cccccc;}
.electronicTable select {height: 30px; margin: 0px 10%; width: 80%; display: inline-block; padding: 4px 6px; font-size: 12px; line-height: 20px; color: #555555;vertical-align: middle;
                         -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.mainContainer .innerContainer label img{width:auto;height:auto;}
#content2 .leftContainer  {width: 75%;}
#content2 .rightContainer  {width: 25%;}
.chartContainer{border:1px solid #ccc;width:45%;min-height:400px;}

/************ Css for Table **********/
table {background: #f5f5f5; border-collapse: separate; font-size: 12px; line-height: 20px; margin: 0px auto; text-align: left; width: 100%;}	
th {background-image: url("../images/TabBack.png"); background-repeat: x;color:#2882BD;}
tr:nth-child(even){background-color: #c4d7cc}
/*th:after {background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08)); content: ''; display: block; height: 25%; left: 0; margin: 1px 0 0 0; position: absolute; top: 25%; width: 100%;}
th:first-child {border-left: 1px solid #777; box-shadow: inset 1px 1px 0 #999;}
th:last-child {box-shadow: inset -1px 1px 0 #999;}
td {border-right: 1px solid #fff; border-left: 1px solid #e8e8e8; border-top: 1px solid #fff; border-bottom: 1px solid #e8e8e8; padding: 5px 10px; position: relative; transition: all 300ms;}
td:first-child {box-shadow: inset 1px 0 0 #fff;}	 
td:last-child {border-right: 1px solid #e8e8e8; box-shadow: inset -1px 0 0 #fff;}
tr:last-of-type td {box-shadow: inset 0 -1px 0 #fff; }
tr:last-of-type td:first-child {box-shadow: inset 1px -1px 0 #fff;}	
tr:last-of-type td:last-child {box-shadow: inset -1px -1px 0 #fff;}*/	
.tableContainer {overflow-x: scroll; width: 100%;}
.tableContainer td input {width: 50px;}
.tableContainer td textarea, .tableContainer td select {width: 50px;}



/********* css for other pages *************/
.innerContainer .fsSubField label{width:20%;text-align:left;}
.purchaseTable th {text-align: center;padding: 0;vertical-align: middle;}
.purchaseTable tbody td {padding: 10px 0;}
.innerContainer .purchaseTable tbody td input[type="text"] {width:100%;margin:0;}
.purchaseTable tbody td.add {text-align:center;color:Blue;}
.leftField {border: 1px solid #ccc;border-radius: 10px;margin: 10px;padding: 10px;width: 40%;}
.rightField {border: 1px solid #ccc;border-radius: 10px;margin: 10px;padding: 10px;width: 40%;}
.innerContainer .dynamicField .fsSubField label {width:30%;}
.electronicTable .purchaseTable select{height: 37px;width:auto;}
.innerContainer .fsSubField.addressField label {padding-bottom: 0;padding-top: 0;vertical-align: top;}
.buttons{border:2px solid cornflowerblue;border-radius:5px;}
.save a{background: #5291dd;border: 2px solid #fff;border-radius: 5px;display: block;margin: 5px;padding: 4px 28%;color:#fff;box-shadow:0 1px 8px black;}
.back a{background: #5291dd;border: 2px solid #fff;border-radius: 5px;display: block;margin: 5px;padding: 4px 28%;color:#fff;box-shadow:0 1px 8px black; }
#myBtn {background-color: #0460a9;border: medium none;border-radius: 5px;bottom: 25px;color: white;cursor: pointer;display: none;outline: medium none;
    padding: 10px;position: fixed;right: 2%;z-index: 99;}

.electronicTable td img{width:27px;height:25px;}
.purchase-manager .section {border:none;}
.table-purchase {width:80%;float:right;min-height:450px;background:#fff;background:#fff;border:1px solid #000;}
.manage-bill-items {float:left;width:18%;background:#fff;border:1px solid #000;margin-right:2%;min-height:450px;}
.manage-bill-items .new-items{margin: 30px auto;}
.manage-bill-items ul.firstULItem {border: 2px solid #cd8;border-radius: 18px;margin: 0px 2% 5px;}
.manage-bill-items ul li ul li {display:none;}
.manage-bill-items ul li {width:100%;padding:5px 5%;}
.manage-bill-items ul li a{font-size:14px;}
.manage-bill-items ul li ul li a{font-size:12px;line-height:16px;}
.manage-bill-items ul li .items-added {float:right;background:#000;margin:2px 0;border-radius: 6px;}
.manage-bill-items ul li .items-added a {color:#fff;}
.manage-bill-items ul li:hover ul li{display:block;border-bottom:1px solid #fff;}
.manage-bill-items ul li a:hover ul li a{color:#fff;}
.manage-purchase-dropdown select{width:300px;height:35px;}
.innerContainer  {padding: 10px;}


/************Stock Report***********************/
.electronicTable input.datepicker {width: 220px;background-color: #ffffff;border: 1px solid #cccccc; height: 30px;line-height: 30px;display: inline-block;height: 25px;padding: 4px 6px;font-size: 12px;line-height: 20px;color: #555555;vertical-align: middle;
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}






/* Shutter Out Vertical */
.hvr-shutter-out-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  /*background: #e1e1e1;*/
  e1; */
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-shutter-out-vertical:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #cad43f; /* Old browsers */
background: -moz-linear-gradient(top, #707507 0%, #707507 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #707507 0%,#707507 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #707507 0%,#707507 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cad43f', endColorstr='#aaaf3b',GradientType=0 ); /* IE6-9 */

  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active {
  color: white;
}
.hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}






/******** mobile layout starts here *********/
@media only screen and (max-width: 667px) {
    /******** Default Section*********/
    .justDesktop {display: none;}
    .justMobile {display: block;}
    .text-center-mob {text-align: center;}
    .innerBodyContainer {padding: 0 5%;}

    /******** Font Size *********/
    h1 {font-size: 20px; line-height: 23px;}
    h2 {font-size: 18px; line-height: 22px;}
    h3 {font-size: 16px; line-height: 20px;}
    p {font-size: 14px; line-height: 18px;}
    a {font-size: 14px; line-height: 18px;}

    label {}
    input[type="text"] {}
    input[type="submit"] {}

    sub, sup {font-size: 10px; line-height: 12px;}
    h1 sub, h1 sup {font-size: 12px; line-height: 15px;}
    h2 sub, h2 sup {font-size: 10px; line-height: 13px;}


    /******** Margin / Padding *********/
    .marTop60 {margin-top: 30px;}
    .marTop40 {margin-top: 20px;}
    .marTop30 {margin-top: 15px;}
    .marTop20 {margin-top: 10px;}
    .marTop10 {margin-top: 5px;}
    .marBot60 {margin-bottom: 30px;}
    .marBot40 {margin-bottom: 20px;}
    .marBot30 {margin-bottom: 15px;}
    .marBot20 {margin-bottom: 10px;}
    .marBot10 {margin-bottom: 5px;}

    .padTop60 {padding-top: 30px;}
    .padTop40 {padding-top: 20px;}
    .padTop30 {padding-top: 15px;}
    .padTop20 {padding-top: 10px;}
    .padTop10 {padding-top: 5px;}
    .padBot60 {padding-bottom: 30px;}
    .padBot40 {padding-bottom: 20px;}
    .padBot30 {padding-bottom: 15px;}
    .padBot20 {padding-bottom: 10px;}
    .padBot10 {padding-bottom: 5px;}

    /******** Css for Navigation *********/
    #menuNav {display: none;}
    #menuNav ul li{width: 100%;}
    #menuNav  ul > li:hover {background-color: #000;}
    #menuNav  ul > li:hover a{color: #fff;}
    #menuNav  ul  li  a {}
    #menuNav  ul > li:hover ul.levelTwoNav {display: none;}
    li.has-sub:hover > ul.levelThreeNav {display: none;}
    #menuNav ul li.has-sub:hover > a:before {display: block;}
    #menuNav ul li.has-sub.active > a:before {display: none;}
    .levelTwoNav {position: relative; width:100%; top: 0px;}
    .levelThreeNav {position: relative; width:100%; margin-top: 0px; left: 0;}
    li.active  > a {background: #444444!important;}
    /*li.active > ul {display: block!important;}*/
    #menuNav  ul > li.active ul.levelTwoNav > li >a{padding-left: 30px;}
    #menuNav  ul > li.active ul.levelThreeNav > li >a{padding-left: 50px;}

    /******** Css for Header *********/
    #header h1 {font-size: 14px; width: 200px;}
    .menu_icon {width: 50px; margin: 17px 0 0;}
    .logoImage {width: 80px;}
    .menuItem1 {padding: 10px; border-right: 1px solid #fff; background: url(../images/down-arrow.png) no-repeat; background-size: 14px; background-position: 90% 14px;}
    .menuItem2 {padding: 10px 20px; text-align: right; background: url(../images/down-arrow.png) no-repeat; background-size: 14px; background-position: 10% 14px;}
    .mobileProfile {width: 50%; top: 99px;}
    .userProfile:before {display: none;}


    /******** Css for login Page *********/
    #loginPage h1 {font-size: 25px; line-height: 32px; letter-spacing: 1px;}
    #loginPage h2 {font-size: 22px; line-height: 26px;}
    .loginBlock {width: 100%; padding: 30px 5%;}
    #loginPage input[type="text"], .loginBlock input[type="password"], .loginBlock input[type="email"] {padding: 10px;background-size: 22px;}
    #loginPage input[type="submit"] {width: 120px;}

    /************ Css for Home page **********/
    body#homePage {background:none;}
    .mainContainer{border:none;border-radius:0;}
    .innerContainer label {font-size: 11px;overflow-wrap: break-word; padding: 5px; width: 24%; display: block; float: left; height: 65px;}
    .section {border: none;}
    .innerContainer main {min-width: auto;}
    #content2 .leftContainer  {width: 100%;}
    #content2 .rightContainer  {width: 100%;}
    .tableContainer {overflow-x: scroll; width: 100%;}
    .electronicTable select {margin: 20px 10%;}
    #homepage .mainContainer .electronicTable .section {width:100%;}
    .leftContainer { float: none; width: auto;margin-right:0;}
    .homeTable{width:100%;overflow-y: scroll;}

    
    /************ Css for purchase page **********/
    #purchase .mainContainer .electronicTable .section{width:100%;margin:0 auto;}
    .innerContainer .fsSubField label{width: 36%;}
    .innerContainer .fsSubField input[type="text"]{width: 57%;}
    .electronicTable .fsSubField select{width:auto;}
    .innerContainer .addressField textarea{width:57%;}
    .leftField {float:none;width:99%;margin:10px 0;}
    .rightField {float:none;width:99%;margin:10px 0;}
    .purchaseTable{width:99%;overflow-y:scroll;}
    .innerContainer label.tabLabel{border-color: orange #9d9d9d; border-image: none; border-style: solid; border-width: 2px 1px; width: 97%; margin-bottom:5px;}
    .innerContainer input:checked + label.tabLabel{border-bottom:2px solid orange;background:#d9edf7;}

    /*******************Stock Report***********************/
    .innerContainer .fsSubField input[type="date"]{width: auto;}
    .innerContainer .stock-report-data .fsSubField label {width: 33%;}

    /********* Purchase-Manage ***********/
    .mainContainer .electronicTable .section{width:97%;margin: 0 auto;}	
    .table-purchase{float:none;width:100%;min-height:auto;overflow-y: scroll;}
    .manage-bill-items{float:none;width:100%;min-height:auto;margin-right:0;}
}

/******** iPad layout starts here *********/
@media only screen and (min-width: 668px) and (max-width: 999px) {
    /******** Default Section*********/
    .innerBodyContainer {padding-left: 10px; padding-right: 10px;}


    /******** Css for Navigation *********/
    #menuNav  ul li a {font-size: 11px; padding: 17px 4px;}
    #menuNav ul li.has-sub > a {padding-right: 25px;}

    /******** Css for Header *********/
    #header h1 {font-size: 23px; padding-top: 10px;}
    .avatar {width: 40px; height: 40px; margin: 14px 0 10px 5px;}
    .userProfile {top: 63px;}


    /******** Css for purchase page *********/
    .leftField{width:40%;}
    .innerContainer .dynamicField .fsSubField label{width:47%;}


    .tableContainer {overflow-x: scroll; width: 100%;}
}