@media print{
   .noprint{
       display:none; !important;
   }
  
   
   .comp {width: 90%;margin: auto}
.logo {width: 4vw;height: 4vw;float: left}
.clogo {width: 100%}
.name {width: 68%;margin: auto;float: left;overflow-x: hidden}
.cname {margin: auto;font: 2.6vw calibri;color: white;margin-left: 5%}

#comname {width: 65%}
}

.printhead{
		   display:none;
	   }
	   
	    #Print{
       display:none; !important;
   }

body {margin: 0px;background-color: whitesmoke}
a {text-decoration: none}
p {-webkit-user-select: none}
span {-webkit-user-select: none}
img {-webkit-user-select: none}
button {-webkit-user-select: none}
br {-webkit-user-select: none}

.header {width: 100%;height: 8.5vw;position: fixed;display: block;background-color: darkcyan;margin: auto;z-index: 1000}
.header1 {width: 100%;height: 4vw;padding-top: 0.5vw}
.header2 {width: 100%;height: 4vw;}
.comp {width: 90%;margin: auto}
.logo {width: 4vw;height: 4vw;float: left}
.clogo {width: 100%}
.name {width: 68%;margin: auto;float: left;overflow-x: hidden}
.cname {margin: auto;font: 2.6vw calibri;color: white;margin-left: 5%}

#comname {width: 65%}
#mendv {width: 25%}

.trk {width: 90%;margin: auto}
.trkdiv {width: 28%;height: 3vw;margin: auto;float: left;margin-top: 0.5vw}
.trkdiv2 {width: 20%;height: 3vw;margin: auto;float: left;margin-top: 0.5vw}
.trkh {width: 20%;margin: auto;font: 1.5vw calibri light;color: white;margin-left: 5%;float: left}
.trkh1 {width: 40%;margin: auto;font: 1.5vw calibri light;color: white;margin-left: 5%;float: left}
.trkh2 {width: 45%;margin: auto;font: 1.5vw calibri light;color: white;margin-left: 5%;float: left}
.trkinp {width: 30%;height: 1.6vw;margin: auto;font: 1.2vw calibri;float: left}
.trkbtn {margin: auto;font: 1.5vw calibri;float: righ;}
.trkbtn1 {width: 2vw;height: 2vw;margin: auto;font: 1.6vw calibri;float: left;margin-left: 0.5vw;background-color: mintcream;text-align: center;border-radius: 0.2vw;cursor: pointer;background-image: url(../Image/search.png);background-size: 90% 90%;background-position: center;background-repeat: no-repeat;}
.trkbtn2 {width: 5.5vw;height: 2vw;margin: auto;font: 1.6vw calibri;float: left;margin-left: 0.5vw;background-color: mintcream;text-align: center;border-radius: 0.2vw;cursor: pointer;background-repeat: no-repeat}

.trkbtn1:hover {box-shadow: 0px 0px 0.5vw black}
.trkbtn2:hover {box-shadow: 0px 0px 0.5vw black}

.trkbtn1:active {background-color: gray;background-image: url(../Image/search1.png);box-shadow: none }
.trkbtn2:active {background-color: gray;color: white;-webkit-user-select: none;box-shadow: none}



.trkbtn3 {width: 7vw;height: 2vw;margin: auto;font: 1.6vw calibri;float: left;margin-left: 0.5vw;background-color: mintcream;text-align: center;border-radius: 0.2vw;cursor: pointer;background-repeat: no-repeat;}
.trkbtn3:active {background-color: gray;color: white;-webkit-user-select: none;box-shadow: none}

.trkbtn4 {width: 14vw;height: 2vw;margin: auto;font: 1.6vw calibri;margin-left: 0.5vw;margin-top: 0.5vw;text-align: center;border-radius: 0.2vw;cursor: pointer;background-repeat: no-repeat;}
.trkbtn4:active {background-color: gray;color: white;-webkit-user-select: none;box-shadow: none}



.trkdiv3 {width: 25%;height: 3vw;margin: auto;float: right;margin-top: 0.5vw}
.trkdiv3 .trkh1 {font: 1.8vw calibri}
.trkdiv3 .trkh2 {font: 1.8vw calibri light;color: cyan}






#header {width: 100%;height: 10vw;position: fixed;display: block;background-color: darkcyan;margin: auto;overflow: hidden;animation: header 2s}
#header1 {width: 80%;margin: auto;height: 6vw;animation: header1 2s}
#comp {width: 90%;margin: auto;margin-top: 1vw;animation: comp 2s}
#logo {width: 10%;float: left;animation: logo 2s}
.clogo {width: 100%;float: left}
#name {width: 80%;margin: auto;float: left;animation: name 2s}
#cname {margin: auto;font: 5vw calibri;color: white;margin-left: 5%;animation: cname 2s}

@keyframes header {
	
	0% {height: 100%}
	60% {height: 100%}
	100% {height: 10vw}
}
@keyframes header1 {
	0% {width: 80%;height: 100%}
	40% {height: 100%}
	100% {height: 10vw}
}
@keyframes comp {
	0% {width: 90%;height: 40%;margin-top: 10%}
	40% {width: 90%;height: 40%;margin-top: 10%}
	100% {height: 8vw;margin: auto;margin-top: 1vw}
}
@keyframes logo {
	0% {width: 25%;margin-top: 10%;float: none;margin: auto}
	40% {width: 25%;margin-top: 10%;float: none;margin: auto}
	100% {width: 10%;margin-top: 0%;float: left}
}
@keyframes name {
	0% {width: 50%;float: none;margin: auto}
	40% {width: 50%;float: none;margin: auto}
	50% {width: 50%;float: none;margin: auto}
	100% {width: 80%;float: left}
}

@keyframes cname {
	0% {margin: auto;font: 4vw calibri;text-align: center}
	40% {margin: auto;font: 4vw calibri;text-align: center}
	100% {margin-top: 0%}
}








.header2 {width: 100%;height: 4vw}
.mendv {width: 20%;margin: auto;float: left}

.menubtn {width: 3vw;height: 3vw;margin: .5vw;float: left;cursor: pointer}
.menubtn2 {width: 3vw;height: 3vw;margin: .5vw;float: right;cursor: pointer}
.menic {width: 100%;height: 100%}





.body {min-width: 100%;height: 31.6vw;background-color: whitesmoke;padding-top: 15%;margin: auto}

.loginf {width: 40vw;height: auto;margin: auto;border: 2px solid darkcyan;border-radius: 1vw;padding-bottom: 2vw}

.logmh {font: 3vw calibri light;color: darkcyan;margin: auto;text-align: center;margin-bottom: 2%}

.logh {font: 2vw calibri light;color: black;margin: auto;margin-left: 10%;}
.logh1 {font: 1.5vw calibri light;color: black;margin: auto;margin-left: 2%;float: left;padding-bottom: 2vw}
.loginp {width: 80%;font: 1.6vw calibri light;margin: auto;margin-left: 10%;outline: none;border: 1.2px solid blue;border-radius: .3vw;padding-left: .5vw}
.loginp:focus {border: 1.2px solid magenta}

.subbtn {width: 30%;font: 1.6vw calibri light;margin: auto;margin-left: 35%;margin-top: 2%}



.body2 {min-width: 100%;height: 31.6vw;background-color: whitesmoke;padding-top: 9%;margin: auto}
.menu {width: 84vw;height: 36vw;margin: auto;display: none;overflow-y: scroll}
.menu0 {width: 80vw;height: 36vw;margin: auto;  display: block;overflow: hidden;background-image: url(../Image/etransbgi.png);background-size: 100% 100%}

.menuicons {width: 8.5vw;height: 12vw;margin: 0.8vw;float: left;background-color: white;color: white;padding-top: 0.5vw;cursor: pointer;-webkit-user-select: none;}
.menuicons:hover {background-color: white;box-shadow: 0px 0px 1vw black;transition: .3s}

.mic {width: 90%;height: 70%;background-size: 100% 100%;background-image: url(../Image/eTrans.png);background-repeat: no-repeat;background-position: center;margin: auto;background-color: white}

.menit {font: 1.4vw calibri;text-align: center;cursor: pointer;-webkit-user-select: none;margin: auto;background-color: dodgerblue;width: 90%;border-radius: 0.3vw;box-shadow: 0px 0px 0.5vw black}


.menuicons:hover .menit {background-color: white;color: dodgerblue;box-shadow: none;transition: .3s}
.menit:visited {background-color: white;color: midnightblue;box-shadow: 0px 0px 1vw black;transition: .3s}


#mi1 {background-image: url(../Image/etransicon/branchmaster.png)}
#mi2 {background-image: url(../Image/etransicon/clientmaster.png)}
#mi3 {background-image: url(../Image/etransicon/employeemaster.png)}
#mi4 {background-image: url(../Image/etransicon/vendormaster.png)}
#mi5 {background-image: url(../Image/etransicon/vehiclemaster.png)}
#mi6 {background-image: url(../Image/etransicon/customerrate.png)}
#mi7 {background-image: url(../Image/etransicon/docketentry.png)}
#mi8 {background-image: url(../Image/etransicon/challanentry.png)}
#mi9 {background-image: url(../Image/etransicon/arrivalentry.png)}
#mi10 {background-image: url(../Image/etransicon/delivery.png)}
#mi11 {background-image: url(../Image/etransicon/loryhire.png)}
#mi12 {background-image: url(../Image/etransicon/invoicecreation.png)}
#mi13 {background-image: url(../Image/etransicon/collectioninvoice.png)}
#mi14 {background-image: url(../Image/etransicon/collection.png)}
#mi15 {background-image: url(../Image/etransicon/accountgorup.png)}
#mi16 {background-image: url(../Image/etransicon/accountledger.png)}
#mi17 {background-image: url(../Image/etransicon/receiptsvoucher.png)}
#mi18 {background-image: url(../Image/etransicon/expensevoucher.png)}
#mi19 {background-image: url(../Image/etransicon/journalvoucher.png)}
#mi20 {background-image: url(../Image/etransicon/contravoucher.png)}
#mi21 {background-image: url(../Image/etransicon/stockentry.png)}
#mi22 {background-image: url(../Image/etransicon/stocktransfer.png)}
#mi23 {background-image: url(../Image/etransicon/userpermission.png)}
#mi24 {background-image: url(../Image/etransicon/branchaccess.png)}
#mi25 {background-image: url(../Image/etransicon/userpassword.png)}
#mi26 {background-image: url(../Image/etransicon/salereport.png)}
#mi27 {background-image: url(../Image/etransicon/stockreport.png)}
#mi28 {background-image: url(../Image/etransicon/challanreport.png)}
#mi29 {background-image: url(../Image/etransicon/challanreport.png)}
#mi30 {background-image: url(../Image/etransicon/collectionreport.png)}
#mi31 {background-image: url(../Image/etransicon/loryhirereport.png)}
#mi32 {background-image: url(../Image/etransicon/gatepassreport.png)}
#mi33 {background-image: url(../Image/etransicon/accountgorup.png)}
#mi34 {background-image: url(../Image/etransicon/accountledger.png)}
#mi35 {background-image: url(../Image/etransicon/contravoucher.png)}
#mi36 {}















.menu2 {width: 84vw;height: 36vw;margin: auto;display: none;overflow-y: scroll}
.menuhd {width: 100%;height: auto;margin: auto;float: left;padding-bottom: 2vw}
.menuh {width: 80vw;height: 3vw;margin: .5vw;float: left;background-color: midnightblue;color: white;font: 2vw calibri;text-align: center;padding-top: .5vw}
.menit2 {width: 18vw;height: 3vw;margin: .5vw;float: left;background-color: midnightblue;color: white;font: 1.8vw calibri;padding-top: .5vw;padding-left: 1vw;cursor: pointer;-webkit-user-select: none}
.menit2:hover {background-color: white;color: dodgerblue;box-shadow: 0px 0px 1vw black;transition: .3s}
.menit2 {background-color: dodgerblue;color: white;box-shadow: 0px 0px 0vw;transition: .3s}


.menuicons {animation: riseup 1s;animation-iteration-count: 1;-webkit-animation: riseup 2s;-webkit-animation-iteration-count: 1;}
.menit2 {animation: riseup2 1s;animation-iteration-count: 1;-webkit-animation: riseup2 2s;-webkit-animation-iteration-count: 1;}
.menuh {animation: riseup3 1s;animation-iteration-count: 1;-webkit-animation: riseup3 2s;-webkit-animation-iteration-count: 1;}

@keyframes riseup{
	
	0% {margin-top: 5vw;opacity: 0}
	100% {margin-top: 1vw;opacity: 1}
}

@keyframes riseup2{
	
	0% {margin-top: 3vw;opacity: 0}
	100% {margin-top: .5vw;opacity: 1}
}

@keyframes riseup3{
	
	0% {margin-top: 3vw;opacity: 0}
	100% {margin-top: .5vw;opacity: 1}
}











/* Popup Menu Codes */


/* The Modal (background) */
.menu-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1100; /* Sit on top */
    padding-top: 2vw; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.memodal-cont {
    background-color: white;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 85%;
	height: auto;
	border-radius: 20px;
	box-shadow: 0px 0px 20px black;
	margin-bottom: 150px
}
#memodal::-webkit-scrollbar {display: none}

/* The slClose Button */
.meclose {
    color: #aaaaaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
}

.meclose:hover,
.meclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}







/* Registration Popup Codes */


/* The Modal (background) */
.register-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1100; /* Sit on top */
    padding-top: 2vw; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.register-cont {
    background-color: white;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 40%;
	height: 38vw;
	border-radius: 20px;
	box-shadow: 0px 0px 20px black;
	margin-bottom: 150px
}
#rgmodal::-webkit-scrollbar {display: none}

/* The slClose Button */
.rgclose {
    color: #aaaaaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
}

.rgclose:hover,
.rgclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.rgchange {width: 90%;height: 34vw;margin: auto;overflow-y: scroll}
.rgchdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.rgchd {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.rgchin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.rgform2 {width: 100%;height: auto;margin: auto;margin-top: 2vw;float: left}
.rgchbtn {width: 45%;height: 2vw;margin: .7vw}




/* Forgot Password Popup Codes */


/* The Modal (background) */
.forgot-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1100; /* Sit on top */
    padding-top: 2vw; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.forgot-cont {
    background-color: white;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 40%;
	height: 30vw;
	border-radius: 20px;
	box-shadow: 0px 0px 20px black;
	margin-bottom: 150px
}
#fpmodal::-webkit-scrollbar {display: none}

/* The slClose Button */
.fpclose {
    color: #aaaaaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
}

.fpclose:hover,
.fpclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.fpform {width: 90%;height: 30vw;margin: auto}
.fprdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.fprd {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.fprin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.fpform2 {width: 100%;height: auto;margin: auto;margin-top: 2vw;float: left}
.fprbtn {width: 45%;height: 2vw;margin: .7vw}












/* Branch Change Popup Codes */


/* The Modal (background) */
.branch-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1100; /* Sit on top */
    padding-top: 2vw; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.brmodal-cont {
    background-color: white;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 40%;
	height: 18vw;
	border-radius: 20px;
	box-shadow: 0px 0px 20px black;
	margin-bottom: 150px
}
#brmodal::-webkit-scrollbar {display: none}

/* The slClose Button */
.brclose {
    color: #aaaaaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
}

.brclose:hover,
.brclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.brchange {width: 90%;height: 5vw;margin: auto}
.brchdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.brchd {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.brchin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.brform2 {width: 100%;height: auto;margin: auto;margin-top: 2vw;float: left}
.brchbtn {width: 45%;height: 2vw;margin: .7vw}



/* Backup Popup Codes */


/* The Modal (background) */
.database-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1100; /* Sit on top */
    padding-top: 2vw; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.dtmodal-cont {
    background-color: white;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 40%;
	height: 32vw;
	border-radius: 20px;
	box-shadow: 0px 0px 20px black;
	margin-bottom: 150px
}
#dtmodal::-webkit-scrollbar {display: none}

/* The slClose Button */
.dtclose {
    color: #aaaaaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
}

.dtclose:hover,
.dtclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.data {width: 90%;height: 5vw;margin: auto}
.datadh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.datad {width: 49%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.datain {width: 45%;height: auto;margin: auto;float: left;font: 1.2vw calibri;margin-left: 3%}
.dtform1 {width: 100%;height: auto;margin: auto;margin-top: 0.5vw;float: left}
.dtform2 {width: 100%;height: auto;margin: auto;margin-top: 1vw;float: left}
.databtn {width: 45%;height: 2vw;margin: .7vw}




/* Tracking Popup Codes */


/* The Modal (background) */
.track-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1100; /* Sit on top */
    padding-top: 2vw; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.trmodal-cont {
    background-color: white;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 85%;
	height: 85%;
	border-radius: 20px;
	box-shadow: 0px 0px 20px black;
	margin-bottom: 150px
}
#trmodal::-webkit-scrollbar {display: none}

/* The slClose Button */
.trclose {
    color: #aaaaaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
}

.trclose:hover,
.trclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.trackover {height: 85%;overflow-y: scroll;overflow-x: hidden}
.doctrack {width: 90vw;height: 5vw;margin: 2vw}
.dcclienttrk {width: 80vw;height: 18vw;margin: 2vw;background-color: darkgray}






/* Vocher track Popup Codes */


/* The Modal (background) */
.vocher-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1100; /* Sit on top */
    padding-top: 2vw; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.vrmodal-cont {
    background-color: white;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 85%;
	height: 85%;
	border-radius: 20px;
	box-shadow: 0px 0px 20px black;
	margin-bottom: 150px
}
#vrmodal::-webkit-scrollbar {display: none}

/* The slClose Button */
.vrclose {
    color: #aaaaaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
}

.vrclose:hover,
.vrclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.vocf {width: 80vw;height: 8vw;margin: 1vw;}
.vrtabled {width: 90%;height: 18vw;background-color: lightgray;margin: auto;margin-bottom: 0.5vw;overflow-y: scroll}

.vrform {width: 50%;height: 5vw;margin: auto;float: left}
.vrform2 {width: 30%;height: 5vw;margin: auto;float: left}






/*Client Master Code*/

.clientf {width: 80vw;height: 25vw;margin: 2vw}
.clientdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.cform {width: 80%;height: auto;margin: auto;margin-left: 4%;float: left}
.cform2 {width: 15%;height: auto;margin: auto;float: left}

.clientdd {width: 50%;height: 5vw;float: left}
.clientd {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.clientin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.clibtn {width: 80%;height: 2vw;margin: .7vw}

.clidtb {width: 80%;height: auto;max-height: 20vw;border: 1px solid black;overflow-y: scroll;margin: auto;margin-bottom: 5vw}
.clth {width: 16%;height: 3vw;background-color: midnightblue;color: white;font: 1.5vw calibri light}
.cltd {width: 16%;height: 2vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw;font: 1.2vw calibri}




/*Item Master Code*/

.itemf {width: 80vw;height: 25vw;margin: 2vw}
.itemdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.iform {width: 80%;height: auto;margin: auto;margin-left: 4%;float: left}
.iform2 {width: 15%;height: auto;margin: auto;float: left}

.itemdd {width: 50%;height: 4vw;float: left}
.itemdd2 {width: 98%;height: 8vw;float: left}
.itemd {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.itemin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.itbtn {width: 80%;height: 2vw;margin: .7vw}

.itdtb {width: 90%;height: auto;max-height: 20vw;border: 1px solid black;overflow-y: scroll;margin: auto;margin-bottom: 5vw}
.itth {width: 11%;height: 3vw;background-color: midnightblue;color: white;font: 1.5vw calibri light}
.ittd {width: 11%;height: 2vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw;font: 1.2vw calibri}



/*Vendor Master Code*/

.vendorf {width: 80vw;height: 25vw;margin: 2vw}
.vendordh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.vform {width: 80%;height: auto;margin: auto;margin-left: 4%;float: left}
.vform2 {width: 15%;height: auto;margin: auto;float: left}

.vendordd {width: 50%;height: 4vw;float: left}
.vendord {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.vendorin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.venbtn {width: 80%;height: 2vw;margin: .7vw}

.vendtb {width: 80%;height: auto;max-height: 20vw;border: 1px solid black;overflow-y: scroll;margin: auto;margin-bottom: 5vw}
.vnth {width: 16%;height: 3vw;background-color: midnightblue;color: white;font: 1.5vw calibri light}
.vntd {width: 16%;height: 2vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw;font: 1.2vw calibri}



/*Stock Details Code*/

.stkf {width: 95vw;height: 6vw;margin: 2vw}
.stkdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.stform {width: 65%;height: auto;margin: auto;margin-left: 4%;float: left}
.stform2 {width: 30%;height: auto;margin: auto;float: left}

.stkdd {width: 80%;height: 4vw;float: left}
.stkd {width: 30%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.stkin {width: 40%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.stkbtn {width: 40%;height: 2vw;margin-left: .5vw}

.sttabled {width: 95%;height: 30vw;background-color: lightgray;margin: auto;margin-bottom: 5vw;overflow-y: scroll;}
.stkdtb {width: 100%;height: auto;border: 1px solid black;overflow-y: scroll;margin: auto;margin-bottom: 5vw;empty-cells: show;table-layout: auto;background-color: white}
.stth {width: 12%;height: 3vw;background-color: midnightblue;color: white;font: 1.5vw calibri light}
.sttd {width: 12%;height: 2vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw; text-align:center; font: 1.2vw calibri}

.stthsmall {width: 11%;height: 2vw;background-color: midnightblue;color: white;font: 1.2vw calibri light;}
.sttdsmall {width: 11%;height: 1vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw; text-align:center; font: 1.0vw calibri;}

/*Purchase Form Code*/

.purf {width: 80vw;height: 30vw;margin: 2vw}
.purdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.puform {width: 80%;height: auto;margin: auto;margin-left: 4%;float: left}
.puform2 {width: 15%;height: auto;margin: auto;float: left}

.purdd {width: 50%;height: 4vw;float: left}
.purd {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.purin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.purbtn {width: 80%;height: 2vw;margin: .7vw}

.purdtb {width: 90%;height: auto;max-height: 20vw;border: 1px solid black;overflow-y: scroll;margin: auto;margin-bottom: 5vw}
.puth {width: 11%;height: 3vw;background-color: midnightblue;color: white;font: 1.5vw calibri light}
.putd {width: 11%;height: 2vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw;font: 1.2vw calibri}




/*Billing Form Code*/

.salf {width: 80vw;height: 12vw;margin: 2vw}

.salfjv {width: 80vw;height: 6vw;margin: 2vw}

.saldh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.saform {width: 80%;height: auto;margin: auto;margin-left: 4%;float: left}
.saform2 {width: 15%;height: auto;margin: auto;float: left}

.saldd {width: 50%;height: 4vw;float: left}
#salddid {width: 50%;height: 4vw;float: left}
.sald {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.salin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.salind {width: 38%;height: auto;margin: auto;float: left;font: 1.0vw calibri }
.salbtn {width: 80%;height: 2vw;margin: .7vw}

.satabled {width: 95%;height: 30vw;background-color: lightgray;margin: auto;margin-bottom: 5vw;overflow-y: scroll}
.saldtb {width: 100%;height: auto;border: 1px solid black;overflow-y: scroll;margin: auto;margin-bottom: 5vw;empty-cells: show;table-layout: auto;background-color: white}
.sath {width: 12%;height: 3vw;background-color: midnightblue;color: white;font: 1.5vw calibri light}
.satd {width: 12%;height: 2vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw;font: 1.2vw calibri}



.saadid {width: 90vw;height: 5vw;margin: auto}
.saform {width: 90%;height: auto;margin: auto;float: left}

.sadldd {width: 10%;height: 4vw;float: left}
.sadlddcr {width: 20%;height: 4vw;float: left}
.sadldd2 {width: 20%;height: 4vw;float: left}
.sadldd3 {width: 5%;height: 4vw;float: left}
.sadld {width: 90%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.sadlin {width: 90%;height: auto;margin: auto;float: left;font: 1vw calibri }
.sadlbtn {width: 80%;height: 2vw;margin-left: .5vw}

.salf2 {width: 90vw;height: 20vw;margin: 2vw}
.slform {width: 60%;height: 12vw;margin: auto;float: left}

.sldd {width: 40%;height: 2.5vw;float: left}
.sldd2 {width: 60%;height: 5vw;float: left}
.sld {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.sld2 {width: 30%;height: auto;margin: auto;float: left;font: 1.5vw calibri }

.slin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.slin2 {width: 65%;height: auto;margin: auto;float: left;font: 1.2vw calibri }




.slform2 {width: 35%;height: 20vw;margin: auto;float: right}

.slddt {width: 95%;height: 2.5vw;float: left}
.sldt {width: 30%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.sld2t {width: 50%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.slint {width: 40%;height: auto;margin: auto;float: right;font: 1.2vw calibri }
.slin2t {width: 20%;height: auto;margin: auto;float: left;font: 1.2vw calibri }

.saform2 {width: 60%;height: auto;margin: auto;float: left}
.slbtn {width: 18%;height: 2vw;margin: .2vw}





/*collection Form Code*/

.colf {width: 80vw;height: 12vw;margin: 2vw}
.colfch {width: 80vw;height: 15vw;margin: 2vw}

.coldh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.coform {width: 80%;height: auto;margin: auto;margin-left: 4%;float: left}
.coform2 {width: 15%;height: auto;margin: auto;float: left}

.coldd {width: 50%;height: 4vw;float: left}
.cold {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.colin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.colbtn {width: 80%;height: 2vw;margin: .7vw}

.cotabled {width: 90%;height: 25vw;background-color: lightgray;margin: auto;margin-bottom: 5vw;overflow-y: scroll}
.cokdtb {width: 100%;height: auto;border: 1px solid black;overflow-y: scroll;margin: auto;margin-bottom: 5vw;empty-cells: show;table-layout: auto;background-color: white}
.coth {width: 12%;height: 3vw;background-color: midnightblue;color: white;font: 1.5vw calibri light}
.cotd {width: 12%;height: 2vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw;font: 1.2vw calibri}



.coadbi {width: 90vw;height: 4vw;margin: auto}
.codform {width: 100%;height: auto;margin: auto;float: left}

.codldd {width: 9%;height: 3vw;float: left}
.codld {width: 90%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.codlin {width: 90%;height: auto;margin: auto;float: left;font: 1vw calibri }
.codlbtn {width: 80%;height: 2vw;margin-left: .5vw}

.colf2 {width: 80vw;height: 20vw;margin: auto}
.clform {width: 60%;height: 12vw;margin: auto;float: left}

.cldd {width: 80%;height: 4vw;float: left}

.cld {width: 30%;height: auto;margin: auto;float: left;font: 1.5vw calibri }


.clin {width: 25%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.clin2 {width: 68%;height: auto;margin: auto;float: left;font: 1.2vw calibri }




.clform2 {width: 35%;height: 20vw;margin: auto;float: right}

.clddt {width: 95%;height: 2.5vw;float: left}
.cldt {width: 50%;height: auto;margin: auto;float: left;font: 1.5vw calibri }

.clint {width: 40%;height: auto;margin: auto;float: right;font: 1.2vw calibri }
.clin2t {width: 18%;height: auto;margin: auto;margin-left: 3%;float: left;font: 1.2vw calibri }

.coform2 {width: 60%;height: auto;margin: auto;float: left}
.clbtn {width: 18%;height: 2vw;margin: .2vw}


/*Stock Details Code*/

.perf {width: 95vw;height: 6vw;margin: 2vw}
.perdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.prform {width: 65%;height: auto;margin: auto;margin-left: 4%;float: left}
.prform2 {width: 30%;height: auto;margin: auto;float: left}

.perdd {width: 80%;height: 4vw;float: left}
.perd {width: 30%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.perin {width: 40%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.perbtn {width: 40%;height: 2vw;margin-left: .5vw}

.perpanel {width: 95%;height: 20vw;background-color: lightgray;margin: auto;margin-bottom: 5vw;overflow-y: scroll}
.perdtb {width: 100%;height: auto;border: 1px solid black;overflow-y: scroll;margin: auto;margin-bottom: 0vw;empty-cells: show;table-layout: auto;background-color: white}
.prth {width: 12%;height: 3vw;background-color: midnightblue;color: white;font: 2vw calibri light}
.prtd {width: 12%;height: 3vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw;font: 1.8vw calibri}





/* Report Code */
.rptf {width: 80vw;height: 25vw;margin: 2vw}
.rptdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.rform {width: 80%;height: auto;margin: auto;margin-left: 4%;}
.rform2 {width: 30%;height: auto;margin: auto;}

.rptdd {width: 80%;height: 3vw;float: left}
.rptd {width: 30%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.rptin {width: 30%;height: auto;margin: auto;margin-left: 2%;float: left;font: 1.2vw calibri }
.rptbtn {width: 40%;height: 2vw;margin: .7vw}




/* Item Convert Code */
.ictf {width: 90vw;height: 25vw;margin: 2vw}
.ictdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.ictdhp {font: 2.4vw calibri light;margin: auto;margin-bottom: 1vw}
.icform {width: 35%;height: auto;margin: auto;margin-left: 4%;float: left}
.icform2 {width: 20%;height: auto;margin: auto;float: left}

.ictdd {width: 80%;height: 3vw;float: left}
.ictd1 {width: 45%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.ictin {width: 45%;height: auto;margin: auto;margin-left: 2%;float: left;font: 1.2vw calibri }
.ictbtn {width: 60%;height: 2vw;margin: .7vw}

.ictabled {width: 95%;height: 15vw;background-color: lightgray;margin: auto;margin-bottom: 5vw;overflow-y: scroll}
.icdtb {width: 100%;height: auto;border: 1px solid black;margin: auto;margin-bottom: 5vw;table-layout: auto;background-color: white}
.icth {width: auto;height: 3vw;background-color: midnightblue;color: white;font: 1.5vw calibri light}
.ictd {width: auto;height: 2vw;white-space: nowrap;overflow-x: hidden;padding-left: 1vw;font: 1.2vw calibri}






/*Docket Form Code*/

.docf {width: 95vw;height: 12vw;margin: 2vw}
.dcclient {width: 95vw;height: 25vw;margin: 2vw;background-color: darkgray}
.dodetails {width: 95vw;height: 12vw;margin: 2vw;}

.docdh {font: 3vw calibri light;margin: auto;margin-bottom: 1vw}
.doform {width: 100%;height: auto;margin: auto;margin-left: 4%;float: left}
.doclform {width: 45%;height: 10vw;margin: auto;margin-left: 2%;float: left}
.doform2 {width: 15%;height: auto;margin: auto;float: left}

.docdd {width: 25%;height: 4vw;float: left}
.docdd2 {width: 90%;height: 4vw;float: left}
.docdd3 {width: 30%;height: 4vw;float: left}
.docdd3d {width: 18%;height: 4vw;float: left}
.docheck {width: 1vw;height: 1vw}

.docd {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.docin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.docbtn {width: 80%;height: 2vw;margin: .7vw}

.dotabled {width: 95%;height: 30vw;background-color: lightgray;margin: auto;margin-bottom: 5vw;overflow-y: scroll}
.docdtb {width: 100%;height: auto;border: 1px solid black;overflow-y: scroll;margin: auto;margin-bottom: 5vw;empty-cells: show;table-layout: auto;background-color: white}
.doth {width: 12%;height: 3vw;background-color: midnightblue;color: white;font: 1.5vw calibri light}
.dotd {width: 12%;height: 2vw;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;padding-left: 1vw;font: 1.2vw calibri}



.doadid {width: 90vw;height: 5vw;margin: auto}
.doform {width: 90%;height: auto;margin: auto;float: left}
.doformar {width: 90%;height: 2vw;margin: auto;float: left;background-color: dimgrey;padding: 0.5vw}
.doformar p {color: white}

.dodldd {width: 20%;height: 4vw;float: left}
.dodlddcr {width: 20%;height: 4vw;float: left}
.dodldd2 {width: 20%;height: 4vw;float: left}
.dodldd3 {width: 5%;height: 4vw;float: left}
.dodld {width: 90%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.dodlin {width: 90%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.dodlbtn {width: 80%;height: 2vw;margin: .5vw}

.docf2 {width: 90vw;height: 20vw;margin: 2vw}
.dcform {width: 60%;height: 12vw;margin: auto;float: left}

.dcdd {width: 40%;height: 2.5vw;float: left}
.dcdd2 {width: 60%;height: 5vw;float: left}
.dcd {width: 48%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.dcd2 {width: 30%;height: auto;margin: auto;float: left;font: 1.5vw calibri }

.dcin {width: 48%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.dcin2 {width: 65%;height: auto;margin: auto;float: left;font: 1.2vw calibri }




.dcform2 {width: 35%;height: 20vw;margin: auto;float: right}

.dcddt {width: 95%;height: 2.5vw;float: left}
.dcdt {width: 30%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.dcd2t {width: 50%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.dcint {width: 40%;height: auto;margin: auto;float: right;font: 1.2vw calibri }
.dcin2t {width: 20%;height: auto;margin: auto;float: left;font: 1.2vw calibri }

.dcform2 {width: 60%;height: auto;margin: auto;float: left}
.dcbtn {width: 18%;height: 2vw;margin: .2vw}





/* lorry hire code */
.lorldd {width: 12%;height: 3vw;float: left}
.lorld {width: 90%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.lorlin {width: 90%;height: auto;margin: auto;float: left;font: 1.2vw calibri }
.lorlbtn {width: 80%;height: 2vw;margin-left: .5vw}

.lotabled {width: 90%;height: 15vw;background-color: lightgray;margin: auto;margin-bottom: 5vw;overflow-y: scroll}


.lorform {width: 45%;height: 20vw;margin: auto;float: left}
.lorform2 {width: 40%;height: 20vw;margin: auto;float: right}
.lorform3 {width: 80%;height: 5vw;margin: auto;float: right}

.lorrydd {width: 95%;height: 2.5vw;float: left}
.lorrydd2 {width: 95%;height: 6vw;float: left}
.lorryd {width: 45%;height: auto;margin: auto;float: left;font: 1.5vw calibri }
.lorryin {width: 52%;height: auto;margin: auto;float: left;font: 1.2vw calibri }


.stfbtn {width: 10%;height: 2vw;margin-left: .5vw}








/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;border: solid 1px; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: black; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: dimgray; 
}









.error{
	width: 92%;
		margin: 0px auto;
	padding: 10px;
	border: 1px solid #a94442;
	font: 1.8vw calibri;
	color: #a94442;
	background: #f2dede;
	border-radius: 5px;
	text-align: left;
}
.success{
	width: 92%;
		margin: 0px auto;
	font: 1.8vw calibri;
	padding: 10px;
	border: 1px solid #062d00;
	color: #062d00;
	background: #6cf289;
	border-radius: 5px;
	text-align: left;
}
.loader{
	position:fixed;
	z-index:99;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:white;
	display:flex;
	justify-content:center;
	align-items:center;
	
}
.loader > img{
width: 300px;
}
.loader.hidden {
	animation: fadeOut 1s;
	animation-fill-mode: forwards;
}
@keyframes fadeOut{
	100% {
		opacity: 0;
		visibility: hidden;
	}
	}
	


.alert {
  padding: 20px;
  background-color: #2fb741;
  color: white;
   opacity: 1;
  transition: opacity 0.6s;
  z-index:1000;
   position: absolute;
  left: 0px;
  top: 120px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}