html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

@font-face {
    font-family: 'Nunito';
    src: url("fonts/Nunito/Nunito-Regular.ttf");
}
.homepagelogincontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0,0.9);
    position: fixed;
    z-index: 10;
}
.homepagelogincontainer .homelogincontainer {
    background-color: #fff;
    width: 50%;
    height: 80%;
    border-radius: 15px;
}
.homepagelogincontainer .homelogincontainer .loginform {
    height: 100%;
    width: 100%;
    display: grid;
    text-align: center;
    align-items: center;
    grid-template-rows: 1fr 2fr 1fr;
}
.loginform .logindiv2 {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
}
.ulusernameerror , .ulpassworderror {
    display: none;
    width: 80%;
}
.loginform .logindiv2 div .loginlabel {
    display: block;
    font-size: 17px;
}

.loginform .logindiv2 div .logininput {
    width: 80%;
    font-size: 17px;
    margin-top: 10px;
}
/* userregister.php */
.homepageregistercontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0,0.9);
    position: fixed;
    z-index: 10;
}
.homepageregistercontainer .homeregistercontainer{
    background-color: #fff;
    width: 70%;
    height: 80%;
    border-radius: 15px;
}
.homepageregistercontainer .homeregistermsgcontainer  {
    background-color: #fff;
    width: 70%;
    height: 80%;
    border-radius: 15px;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.homepageregistercontainer .homeregistermsgcontainer div {
    margin: 20px 0;
    text-align: center;
}
.homepageregistercontainer .homeregistercontainer .registerform {
    height: 100%;
    width: 100%;
    display: grid;
    text-align: center;
    align-items: center;
    grid-template-rows: 1fr 2fr 1fr;
}
.registerform .registerdiv2 {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    align-items: center;
}

.registerform .registerdiv2 div .registerlabel {
    display: block;
    font-size: 17px;
}
.registerform .registerdiv2 div .registerinput {
    width: 60%;
    font-size: 17px;
    margin-top: 10px;
}
.loggedincontainer {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loggedincontainer .loggedininnercontainer {
    width: 98%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-top: 10px;
}
.indexbody {
    background: url('assets/images/loginbg.webp');
    background-size: cover;
}
.homepagecontainer {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(assets/images/loginbg.webp);
    background-size: cover;
}

.homepagecontainer .homepagecontainer2 {
    width: 98%;
    height: 95%;
    background-color: #fff;
    display: flex;
    flex-flow: row;
    border-radius: 18px;
}

.homepagecontainer .homepagealertscontainer {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    justify-content: center;
    background-color: #fff;
}

.homepagecontainer .homeinnercontainer {
    width: 50%;
    background-color: #fff;
    height: 100%;
    overflow-y: scroll;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    display: grid;
    grid-template-rows: 150px;
    grid-auto-rows: 150px;
    border-left: 1px solid grey;
}

.homeinnercontainer .homenavigation {
    text-decoration: none;
    color: black;
    font-size: 20px;
    user-select: none;
}

.homeinnercontainer .homepurchasecontainer {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeinnercontainer .homesalecontainer {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeinnercontainer .homeaddproductcontainer {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeinnercontainer .homestockcontainer {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeinnercontainer .homeotheroptioncontainer {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeinnercontainer .homepartiescontainer {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeinnercontainer .homepurchasecontainer:hover,
.homeinnercontainer .homesalecontainer:hover,
.homeinnercontainer .homeaddproductcontainer:hover,
.homeinnercontainer .homestockcontainer:hover,
.homeinnercontainer .homepartiescontainer:hover,
.homeinnercontainer .homeotheroptioncontainer:hover {
    box-shadow: 0 0 5px black;
}

* {
    font-family: 'Nunito', sans-serif;
}


/* addnewproduct.html */

.newproductcontainer {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background: url(assets/images/loginbg.webp);
    background-size: cover;
}

.newproductcontainer .newproductinnercontainer {
    width: 70%;
    height: 100%;
    background-color: #fff;
}

.newproductinnercontainer .addproductform {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.newproductinnercontainer .newproductformcontainer {
    height: calc((100%)/5);
    width: 100%;
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
    font-size: 17px;
}

.newproductinnercontainer .newproductformcontainer .newproductformlabel {
    margin-right: 20px;
}

.newproductinnercontainer .newproductformcontainer input {
    font-size: 16px;
    text-transform: uppercase;
}
.newproductinnercontainer .newproductformcontainer .productforminput {
    width: 70%;
}
.newproductheadingcontainer {
    border-bottom: 1px solid rgb(227, 227, 227);
}

.newproductformcontainer .newproductheading {
    font-size: 22px;
    font-weight: 400;
}

.newproductformcontainer .addproductsubmitbtn {
    padding: 5px 20px;
    border-radius: 18px;
    cursor: pointer;
    font-size: 20px;
}

.newproductformcontainer .addproductsubmitbtn:hover {
    padding: 10px 30px;
}

.addproductsuccesscontainer {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 10;
    background-image: url('assets/images/loginbg.webp');
    background-size: cover;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addproductsuccesscontainer .addproductsuccessinnercontainer {
    width: 50%;
    height: 40%;
    background-color: white;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    box-sizing: content-box;
    padding: 20px;
}


/* addsales.html */

.addsalesmaincontainer {
    height: 100%;
    width: 100%;
    background: url("assets/images/loginbg.webp");
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
}
.addsalesmaincontainer .addsalesresultcontainer {
    display: none;
    width: 70%;
    justify-content: center;
    align-items: center;
    background-color: white;
    height: 60%;
    border-radius: 15px;
}
.addsalesmaincontainer .addsalesresultcontainer span {
    font-size: 17px;
    display: block;
}
.addsalesmaincontainer .addsalesresultcontainer a {
    text-decoration: none;
    color: black;
    display: block;
    background-color: white;
    border: 1px solid black;
    padding: 3px 5px;
    border-radius: 5px;
}
.addsalesmaincontainer .addsalesmainform {
    display: flex;
    width: 97%;
    height: 95%;
    border-radius: 15px;
    background-color: #fff;
    flex-direction: column;
}

.addsalesmainform .addsalesheadercontainer {
    height: 25%;
    width: 100%;
}

.addsalesheadercontainer .addsalesheadercontainer1 {
    height: 30%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.addsalesmobsuggestionbox {
    height: auto;
    overflow-y: scroll;
    display: none;
    width: 317px;
    border: 1px solid rgb(118, 118, 118);
    background-color: white;
    position: absolute;
}
.addsalesmobsuggestionbox div {
    padding: 5px;
    color: rgb(118, 118, 118);
    cursor: pointer;
    font-size: 15px;
}
.addsalesmainform .addsalesheadercontainer .addsaleshc1i,    .addsalesmainform .addsalesheadercontainer .addsaleshc2i,    .addsalesmainform .addsalesheadercontainer .addsaleshc3i {
    text-transform: uppercase;
    display: inline;
    width: auto;
}
.addsalesheadercontainer .addsalesheadercontainer2 {
    height: 35%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.addsalesheadercontainer .addsalesheadercontainer3 {
    height: 35%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.salesbankaccountsdiv,.salesdeductionsdiv,.salesdebtduedatediv,.salesdebtamountdiv,.salespaymentreceiveddiv {
    display: none;
}
.addsalesmainform .addsalesbodycontainer {
    height: 50%;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgb(227, 227, 227);
}

.addsalesbodycontainer .addsalesbodygridcontainer {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 6fr 2fr 3fr 3fr;
    grid-template-rows: 1fr 8fr 1fr;
}

.addsalesbodygridcontainer .addsalesgridcolheadings {
    background-color: rgb(240, 240, 240);
    grid-area: 1/1/2/5;
    display: grid;
    grid-template-columns: 6fr 2fr 3fr 3fr;
    text-align: center;
    align-items: center;
}

/* .addsalesgridcolheadings .addsalesheading2 {
    border-left: 1px solid black;
    border-right: 1px solid black;
    box-sizing: content-box;
} */

.addsalesbodygridcontainer .addsalesgridcol1 {
    grid-area: 2/1/3/2;
    overflow-y: scroll;
    width: 98%;
}

.addsalesbodygridcontainer .addsalesgridcol2 {
    grid-area: 2/2/3/3;
    overflow-y: scroll;
    width: 98%;

}

.addsalesbodygridcontainer .addsalesgridcol3 {
    width: 98%;

    grid-area: 2/3/3/4;
    overflow-y: scroll;
}
.addsalesbodygridcontainer .addsalesgridcol4 {
    width: 98%;

    grid-area: 2/4/3/5;
    overflow-y: scroll;
}

.addsalesgridcol1 .addsalesdatacontainer .addsalesproductnamedata,
.addsalesgridcol2 .addsalesdatacontainer .addsalesquantitydata,
.addsalesgridcol3 .addsalesdatacontainer .addsalesamountdata,
.addsalesgridcol4 .addsalesdatacontainer .addsalestotalamountdata {
    box-sizing: content-box;
    width: calc(100% - 8px);
    text-transform: uppercase;
    font-size: 16px;
    padding-left: 3px;
    padding-right: 3px;
}
.addsalesgridcol1 .addsalesdatacontainer .addsalesproductnamesuggestionbox {
    height: auto;
    overflow-y: scroll;
    height: auto;
    display: none;
    position: relative;
    border: 1px solid rgb(118, 118, 118);
}
.addsalesgridcol1 .addsalesdatacontainer .addsalesproductnamesuggestionbox div {
    padding: 5px;
    font-size: 16px;
    color: rgb(118, 118, 118);
    border-bottom: 1px solid rgb(240, 240, 240);
}
.addsalesgridcol1 .addsalesdatacontainer .addsalesproductnamesuggestionbox div:hover {
    background-color: rgb(240,240,240);
    color: black;
    cursor: pointer;
}
.addsalesbodygridcontainer .addsalesgridfooter {
    grid-area: 3/1/4/4;
}

.addsalesgridfooter .addsalesmoredatabtn {
    height: 99%;
    padding: 0 20px;
}

.addsalesmainform .addsalesfootercontainer {
    height: 20%;
    width: 100%;
    box-sizing: border-box;
    border-left: 1px solid rgb(227, 227, 227);
    border-right: 1px solid rgb(227, 227, 227);
    border-bottom: 1px solid rgb(227, 227, 227);
    display: grid;
    grid-template-columns: 6fr 2fr 3fr;
}

.addsalesfootercontainer .addsalesfootercol1container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.addsalesfootercontainer .addsalesfootercol2container {
    border-left: 1px solid rgb(227, 227, 227);
    display: flex;
    flex-direction: column;
}
.addsalesfootercol2container .addsalestotalqtycontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30%;
}
.addsalesfootercol2container .addsalescarriagecheckboxcontainer {
    height: 20%;
    text-align: center;
}
.addsalesfootercol2container .addsalesfinalamountnamecontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(240, 240, 240);
    height: 50%;
}

.addsalesfootercontainer .addsalesfootercol3container {
    display: flex;
    border-left: 1px solid rgb(227, 227, 227);
    flex-direction: column;
}

.addsalesfootercol3container .addsalestotalamountcontainer {
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addsalesfootercol3container .addsalescarriageamountcontainer {
    height: 20%;
    visibility: hidden;
    text-align: center;
}
.addsalesfootercol3container .addsalesfinalamountcontainer {
    height: 49%;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(240, 240, 240);
}

.addsalesmainform .addsalesnotecontainer {
    height: 10%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.addsalesnotecontainer .addsalesnotecol2container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.addsalesnotecontainer .addsalesnotecol2container .addsalesbackbtn {
    padding: 0 20px;
    font-size: 17px;
    height: 70%;
    display: flex;
    align-items: center;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}

.addsalesnotecontainer .addsalesnotecol2container .addsalesavebtn {
    padding: 5px 20px;
    height: 70%;
    cursor: pointer;
    user-select: none;
    font-size: 17px;
}


/* addpurchase.html */
.addpurchasebody {
    background: url(assets/images/loginbg.webp);
    background-size: cover;
}
.addpurchaseresultcontainer {
    display: none;
    width: 70%;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    height: 60%;
    border-radius: 15px;
}
.addpurchaseresultcontainer span {
    font-size: 17px;
}
.addpurchaseresultcontainer a {
    text-decoration: none;
    display: block;
    padding: 3px 5px;
    border-radius: 5px;
}

.addpurchasemaincontainer {
    height: 100%;
    width: 100%;
    background: url("assets/images/loginbg.webp");
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
}

.addpurchasemaincontainer .addpurchasemainform {
    display: flex;
    width: 97%;
    height: 95%;
    border-radius: 15px;
    background-color: #fff;
    flex-direction: column;
}

.addpurchasemainform .addpurchaseheadercontainer {
    height: 17%;
    width: 100%;
    padding: 5px 0;
}

.addpurchaseheadercontainer .addpurchaseheadercontainer1 {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.addpurchaseheadercontainer .addpurchaseheadercontainer1 .addpurchasehc1i{
    text-transform: uppercase;
    display: inline;
    width: auto;
}
.addpurchaseheadercontainer2 .addpurchasehc2i,.addpurchaseheadercontainer2 .addpurchasehc3i {
    display: inline;
    width: auto;
}
.addpurchaseheadercontainer .addpurchaseheadercontainer2 {
    height: 60%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.addpurchasemainform .addpurchasebodycontainer {
    height: 53%;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgb(227, 227, 227);
}

.addpurchasebodycontainer .addpurchasebodygridcontainer {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 6fr 2fr 2fr 3fr;
    grid-template-rows: 1fr 8fr 1fr;
}

.addpurchasebodygridcontainer .addpurchasegridcolheadings {
    background-color: rgb(240, 240, 240);
    grid-area: 1/1/2/5;
    display: grid;
    grid-template-columns: 6fr 2fr 2fr 3fr;
    text-align: center;
    align-items: center;
}

.addpurchasegridcolheadings .addpurchaseheading2 {
    border-left: 1px solid black;
    border-right: 1px solid black;
    box-sizing: content-box;
}

.addpurchasegridcolheadings .addpurchaseheading3 {
    border-right: 1px solid black;
    box-sizing: content-box;
}

.addpurchasebodygridcontainer .addpurchasegridcol1 {
    grid-area: 2/1/3/2;
    height: 100%;
    overflow-y: scroll;
    
}

.addpurchasebodygridcontainer .addpurchasegridcol2 {
    grid-area: 2/2/3/3;
    height: 100%;
    overflow-y: scroll;
}

.addpurchasebodygridcontainer .addpurchasegridcol3 {
    grid-area: 2/3/3/4;
    height: 100%;
    overflow-y: scroll;
}

.addpurchasebodygridcontainer .addpurchasegridcol4 {
    grid-area: 2/4/3/5;
    height: 100%;
    overflow-y: scroll;
}

.addpurchasegridcol1 .addpurchasedatacontainer .addpurchaseproductnamedata,
.addpurchasegridcol2 .addpurchasedatacontainer .addpurchasequantitydata,
.addpurchasegridcol3 .addpurchasedatacontainer .addpurchasedpdata,
.addpurchasegridcol4 .addpurchasedatacontainer .addpurchaseamountdata {
    box-sizing: content-box;
    width: calc(100% - 8px);
    text-transform: uppercase;
    font-size: 16px;
    padding-left: 3px;
    padding-right: 3px;
}
.addpurchasegridcol1 .addpurchasedatacontainer .addpurchaseproductnamesuggestionbox {
    height: 150px;
    overflow-y: scroll;
    display: none;
    position: relative;
    border: 1px solid rgb(118, 118, 118);
}
.addpurchasegridcol1 .addpurchasedatacontainer .addpurchaseproductnamesuggestionbox div {
    padding: 5px;
    font-size: 19px;
    color: rgb(118, 118, 118);
    border-bottom: 1px solid rgb(240, 240, 240);
}
.addpurchasegridcol1 .addpurchasedatacontainer .addpurchaseproductnamesuggestionbox div:hover {
    background-color: rgb(240,240,240);
    color: black;
    cursor: pointer;
}
.addpurchasebodygridcontainer .addpurchasegridfooter {
    grid-area: 3/1/4/4;
}

.addpurchasegridfooter .addpurchasemoredatabtn {
    height: 99%;
    padding: 0 20px;
}


/*  */

.addpurchasemainform .addpurchasefootercontainer {
    height: 20%;
    width: 100%;
    box-sizing: border-box;
    border-left: 1px solid rgb(227, 227, 227);
    border-right: 1px solid rgb(227, 227, 227);
    border-bottom: 1px solid rgb(227, 227, 227);
    display: grid;
    grid-template-columns: 6fr 2fr 3fr;
}

.addpurchasefootercontainer .addpurchasefootercol1container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.addpurchasefootercontainer .addpurchasefootercol2container {
    border-left: 1px solid rgb(227, 227, 227);
    display: flex;
    flex-direction: column;
}

.addpurchasefootercol2container .addpurchasetotalqtycontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40%;
}



.addpurchasefootercol2container .addpurchasefinalamountnamecontainer {
    display: flex;
    border-top: 1px solid rgb(227, 227, 227);
    justify-content: center;
    align-items: center;
    height: 60%;
}

.addpurchasefootercontainer .addpurchasefootercol3container {
    display: flex;
    border-left: 1px solid rgb(227, 227, 227);
    flex-direction: column;
}

.addpurchasefootercol3container .addpurchasetotalamountcontainer {
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}



.addpurchasefootercol3container .addpurchasefinalamountcontainer {
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgb(227, 227, 227);
}


/*  */

.addpurchasemainform .addpurchasenotecontainer {
    height: 10%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.addpurchasenotecontainer .addpurchasenotecol2container {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.addpurchasenotecontainer .addpurchasenotecol2container .addpurchasebackbtn {
    padding: 0 20px;
    font-size: 17px;
    height: 70%;
    display: flex;
    align-items: center;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}

.addpurchasenotecontainer .addpurchasenotecol2container .addpurchaseavebtn {
    padding: 5px 20px;
    height: 70%;
    cursor: pointer;
    user-select: none;
    font-size: 17px;
}


/* stocksummary.html */

.stocksummarycontainer {
    height: 100%;
    width: 100%;
    background: url("assets/images/loginbg.webp");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stocksummarycontainer .stocksummaryinnercontainer {
    height: 95%;
    width: 97%;
    border-radius: 18px;
    box-sizing: content-box;
    background-color: #fff;
}

.stocksummaryinnercontainer .stocksummarysection1 {
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stocksummaryinnercontainer .stocksummarysection1 .stocksummaryheading {
    font-size: 1.6rem;
    font-weight: 400;
}

.stocksummaryinnercontainer .stocksummarysection2 {
    height: 80%;
    border-top: 1px solid rgb(240, 240, 240);
    border-bottom: 1px solid rgb(240, 240, 240);
    box-sizing: content-box;
    display: grid;
    grid-template-rows: 1fr 10fr 1fr;
}

.stocksummarysection2 .stocksummarytableheader {
    display: grid;
    grid-template-columns: 6fr 2fr 2fr;
    background-color: rgb(240, 240, 240);
    text-align: center;
    align-items: center;
}

.stocksummarysection2 .stocksummarytablebody {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 20px;
    grid-auto-rows: 20px;
    overflow-y: scroll;
    box-sizing: content-box;
}

.stocksummarysection2 .stocksummarytablefooter {
    display: grid;
    grid-template-columns: 6fr 2fr 2fr;
    align-items: center;
    background-color: rgb(240, 240, 240);
    box-sizing: content-box;
}

.stocksummarysection2 .stocksummarytablebody .stocksummarytablebodyrow {
    display: grid;
    grid-template-columns: 6fr 2fr 2fr;
    text-align: center;
}

.stocksummaryinnercontainer .stocksummarysection3 {
    height: 10%;
    box-sizing: content-box;
    border-top: 1px solid rgb(240, 240, 240);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.stocksummarysection3 .stocksummarycreditors {
    border-right: 1px solid rgb(215, 215, 215);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stocksummarysection3 .stocksummarydebtors {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* addparties.html */

.addpartiescontainer {
    height: 100%;
    width: 100%;
    background: url("assets/images/loginbg.webp");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addpartiescontainer .addpartiesinnercontainer {
    height: 70%;
    width: 60%;
    background-color: #fff;
    display: flex;
    box-sizing: content-box;
    flex-direction: column;
    border-radius: 18px;
}

.addpartiesinnercontainer .addpartiessuppliersanchor {
    text-decoration: none;
    color: black;
    height: 50%;
    width: 100%;
}

.addpartiessuppliersanchor .addpartiessupplierscontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    height: 100%;
    border-radius: 18px;
    box-sizing: content-box;
    width: 100%;
}

.addpartiesinnercontainer .addpartiescustomersanchor {
    text-decoration: none;
    color: black;
    height: 50%;
    width: 100%;
}

.addpartiescustomersanchor .addpartiescustomerscontainer {
    display: flex;
    border-radius: 18px;
    box-sizing: content-box;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    height: 100%;
    width: 100%;
}

.addpartiessuppliersanchor .addpartiessupplierscontainer:hover,
.addpartiescustomersanchor .addpartiescustomerscontainer:hover {
    box-shadow: 0 0 5px black;
}


/* addsupplierscontainer.html */

.addsupplierscontainer {
    height: 100%;
    width: 100%;
    background: url("assets/images/loginbg.webp");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addsupplierscontainer .addsuppliersinnercontainer {
    height: 90%;
    width: 95%;
    background-color: #fff;
    border-radius: 18px;
}

.addsuppliersinnercontainer .addsuppliersform {
    display: grid;
    grid-template-rows: 1fr 2fr 2fr 2fr 1fr;
    height: 100%;
    width: 100%;
}

.addsuppliersform .addsupplierformheading {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    border-bottom: 1px solid rgb(240, 240, 240);
}

.addsuppliersform .addsuppliersformfields {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    align-items: center;
    font-size: 20px;
}

.addsuppliersformfields .addsuppliersinput {
    font-size: 18px;
}

.addsuppliersform .addsuppliersformbtncontainer {
    border-top: 1px solid rgb(240, 240, 240);
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    align-items: center;
}

.addsuppliersformbtncontainer .addsuppliersformcancelbtn {
    text-decoration: none;
    cursor: pointer;
    padding: 5px 20px;
    user-select: none;
}

.addsuppliersformbtncontainer .addsuppliersformsubmitbtn {
    padding: 5px 20px;
    cursor: pointer;
}

.addsuppliersuccesscontainer {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 10;
    background-image: url('assets/images/loginbg.webp');
    background-size: cover;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addsuppliersuccesscontainer .addsuppliersuccessinnercontainer {
    width: 50%;
    height: 40%;
    background-color: white;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    padding: 20px;
    font-size: 22px;
}


/* addcustomers.html */

.addcustomerscontainer {
    height: 100%;
    width: 100%;
    background: url("assets/images/loginbg.webp");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addcustomerscontainer .addcustomersinnercontainer {
    height: 90%;
    width: 95%;
    border-radius: 18px;
    background-color: #fff;
}

.addcustomersinnercontainer .addcustomersform {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 2fr 2fr 1fr;
}

.addcustomersform .addcustomersformheading {
    font-size: 22px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgb(240, 240, 240);
    align-items: center;
}

.addcustomersform .addcustomersformfields {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-evenly;
    font-size: 20px;
}

.addcustomersform .addcustomersformfields .addcustomersforminput {
    font-size: 18px;
}

.addcustomersform .addcustomersformbtncontainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    border-top: 1px solid rgb(240, 240, 240);
    align-items: center;
}

.addcustomersformbtncontainer .addcustomersformcancelbtn {
    text-decoration: none;
    padding: 5px 20px;
    cursor: pointer;
    user-select: none;
}

.addcustomersformbtncontainer .addcustomersformsubmitbtn {
    padding: 5px 20px;
    user-select: none;
    cursor: pointer;
}

.addcustomersuccesscontainer {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 10;
    background-image: url('assets/images/loginbg.webp');
    background-size: cover;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addcustomersuccesscontainer .addcustomersuccessinnercontainer {
    width: 50%;
    height: 40%;
    background-color: white;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    box-sizing: content-box;
    padding: 20px;
}


/* otheroptions.php */

.otheroptioncontainer {
    background: url("assets/images/loginbg.webp");
    background-size: cover;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.otheroptioncontainer .otheroptioninnercontainer {
    background-color: #fff;
    border-radius: 18px;
    width: 70%;
    height: 90%;
    display: flex;
    flex-direction: column;
}

.otheroptioninnercontainer .otheroptionnav {
    text-decoration: none;
    color: black;
    font-size: 22px;
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.otheroptionnav:hover {
    box-shadow: 0 0 5px black;
}

/* addtransaction.php */
.addtransactioncontainer {
    height: 100%;
    width: 100%;
    background: url("assets/images/loginbg.webp");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.addtransactioncontainer .addtransactioninnercontainer {
    width: 80%;
    height: 90%;
    background-color: #fff;
    border-radius: 18px;
}
.addtransactioninnercontainer .addtransactionform {
    display: grid;
    grid-template-columns: 1fr;
    height:100%;
    grid-template-rows: 7fr 7fr 7fr 7fr 5fr;
}
.addtransactionform .addtransactionformfield {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    font-size: 19px;
}
.addtransactioninnercontainer .addtransactionfootercontainer {
    display: grid;
    grid-gap: 5px;
    background-color: rgb(240, 240, 240);
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: 18px;
}
.addtransactionfootercontainer .addtransactionfooterfield {
    display: flex;
    justify-content: center;
    align-items: center;
}
.addtransactionfootercontainer .addtransactionfooterfield a {
    text-decoration: none;
    color: black;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 18px;
    height: 100%;
}
.addtransactionfootercontainer .addtransactionfooterfield input {
    font-size: 22px;
    cursor: pointer;
    border: 0;
    width: 100%;
    height: 100%;
    border-radius: 18px;
}
.addtransactionfootercontainer .addtransactionfooterfield a:hover,.addtransactionfootercontainer .addtransactionfooterfield input:hover {
    box-shadow: 0 0 5px black;
}  
/* gstdetails.php */
.gstdetailscontainer {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('assets/images/loginbg.webp');
    background-size: cover;
}
.gstdetailscontainer .gstdetailsinnercontainer {
    background-color: #fff;
    height: 90%;
    width: 95%;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
}
.gstdetailsinnercontainer .gstdetailssection1 {
    width: 100%;
    height: 19%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.gstdetailssection1 .gstdetailssection1div1 {
    font-size: 20px;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items:center;
}
.gstdetailsinputfields {
    display: flex;
    flex-flow: row;
}
.gstdetailsinputfields .gstdetailsinputfieldsi  {
    display: inline;
    margin: 0 5px;
}
.gstdetailssection1 .gstdetailssection1div2 {
    height: 70%;
}
.gstdetailssection1 .gstdetailssection1div2 .gstdetailsform {
    display: flex;
    width: 100%;
    align-items: center;
    height: 100%;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.gstdetailsinnercontainer .gstdetailssection2 {
    width: 100%;
    height: 80%;
    border-top: 1px solid rgb(240, 240, 240);
}
.gstdetailssection2 .gstdetailsnoresultsection {
    height: 100%;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}
.gstdetailssection2 .gstdetailspurchasesection {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: row;
    border-top: 1px solid rgb(240, 240, 240);
    border-bottom: 1px solid rgb(240, 240, 240);
}
.gstdetailspurchasesection .gstdetailspurchasediv1 {
    width: 20%;
    height: 100%;
}
.gstdetailspurchasediv1 div {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailspurchasediv1 div .gstdetailstotalpurchaseheading {
    font-weight: 700;
}
.gstdetailspurchasediv1 div .gstdetailstotalpurchaseamount {
    font-weight: 500;
}
.gstdetailspurchasesection .gstdetailspurchasediv2 {
    width: 60%;
    height: 100%;
}
.gstdetailspurchasediv2 .gstdetailspurchasegstslab1 {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: row;
}
.gstdetailsgstslabdiv1 {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsgstslabdiv2 {
    width: 60%;
    height: 100%;
}
.gstdetailsgstslabdiv2 .gstdetailsgstslabheadings {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.gstdetailsgstslabdiv2 .gstdetailsgstslabvalues {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.gstdetailsgstslabtempdiv1{
    height: 100%;
    width: 34%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsgstslabtempdiv2{
    height: 100%;
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsgstslabtempdiv3{
    height: 100%;
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gstdetailsgstslabdiv3 {
    width: 20%;
    height: 100%;
    
}
.gstdetailsgstslabdiv3 div {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailspurchasediv2 .gstdetailspurchasegstslab2 {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: row;
}
.gstdetailspurchasesection .gstdetailspurchasediv3 {
    width: 20%;
    height: 100%;
}
.gstdetailspurchasediv3 div {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailspurchasediv3 div .gstdetailstotalgstpayedheading {
    font-weight: 700;
}
.gstdetailssection2 .gstdetailssalessection {
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: row;
    border-top: 1px solid rgb(240, 240, 240);
    border-bottom: 1px solid rgb(240, 240, 240);

}
.gstdetailssalessection .gstdetailssalesdiv1 {
    width: 20%;
    height: 100%;
}
.gstdetailssalesdiv1 div {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailssalesdiv1 div .gstdetailstotalsalesheading {
    font-weight: 700;
}
.gstdetailssalesdiv1 div .gstdetailstotalsalesamount {
    font-weight: 500;
}
.gstdetailssalessection .gstdetailssalesdiv2 {
    width: 60%;
    height: 100%;
}
.gstdetailssalesdiv2 .gstdetailssalesgstslab1 {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: row;
}
.gstdetailsgstslabdiv1 {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsgstslabdiv2 {
    width: 60%;
    height: 100%;
}
.gstdetailsgstslabdiv2 .gstdetailsgstslabheadings {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.gstdetailsgstslabdiv2 .gstdetailsgstslabvalues {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.gstdetailsgstslabtempdiv1{
    height: 100%;
    width: 34%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsgstslabtempdiv2{
    height: 100%;
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsgstslabtempdiv3{
    height: 100%;
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gstdetailsgstslabdiv3 {
    width: 20%;
    height: 100%;
    
}
.gstdetailsgstslabdiv3 div {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailssalesdiv2 .gstdetailssalesgstslab2 {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: row;
}
.gstdetailssalessection .gstdetailssalesdiv3 {
    width: 20%;
    height: 100%;
}
.gstdetailssalesdiv3 div {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailssalesdiv3 div .gstdetailstotalgstreceivedheading {
    font-weight: 700;
}
.gstdetailssection2 .gstdetailsconclusionsection {
    height: 20%;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.gstdetailsconclusionsection .gstdetailsconclusiondiv1 {
    width: 80%;
    height: 100%;
}
.gstdetailsconclusiondiv1 .gstdetailconclusiond1headings,.gstdetailsconclusiondiv1 .gstdetailsconclusiond1amounts {
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.gstdetailsconclusiondiv1 .gstdetailsconclusionsheadamount1 {
    height: 100%;
    width: 34%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsconclusiondiv1 .gstdetailsconclusionsheadamount2 {
    height: 100%;
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsconclusiondiv1 .gstdetailsconclusionsheadamount3 {
    height: 100%;
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsconclusionsection .gstdetailsconclusiondiv2 {
    width: 20%;
    height: 100%;
    background-color: rgb(240, 240, 240);
    border-bottom-right-radius: 18px;
    display: flex;
    flex-direction: column;
}
.gstdetailsconclusiondiv2 .gstdetailsconclusiond2div1 {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gstdetailsconclusiondiv2 .gstdetailsconclusiond2div1 .gstdetailsconclusiond2heading {
    font-weight: 700;
}
.gstdetailsconclusiondiv2 .gstdetailsconclusiond2div2 {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* purchasesalesdetail.php */
.pandsdetailoutercontainer {
    min-height: 100vh;
    height: auto;
    width: 100%;
    background: url(assets/images/loginbg.webp);
    background-size: cover;

}
.pandsdetailinnercontainer {
    min-height: 95vh;
    height: auto;
    width: 97%;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-flow: row;

}
.pandsdetailinnercontainer .pandsdetaildiv {
    width: 50%;
    position: relative;
}
.pandsdetaildiv .pandsdetailpurchaseanchor,.pandsdetaildiv .pandsdetailsalesanchor {
    width: 100%;
    height: 100%;
    color: black;
    text-decoration: none;
    transition: 0.75s;
}
.pandsdetaildiv .pandsdetailpurchaseanchor:hover,.pandsdetaildiv .pandsdetailsalesanchor:hover {
    box-shadow: 0 0 9px #000;
    
}

/* salesdetails.php */
.salesdetailoutercontainer {
    height: 100%;
    width: 100%;
    background: url(assets/images/loginbg.webp);
    background-size: cover;
}
.salesdetailoutercontainer .salesdetailinnercontainer {
    height: 97%;
    width: 97%;
    border-radius: 18px;
    background-color: white;
    position: relative;
}
.salesdetailinnercontainer .salesdetailheadercontainer {
    padding: 10px;
    border-bottom: 1px solid rgb(227, 227, 227);
    height: 35%;
}
.salesdetailheadercontainer .salesdetailform .salesdetailforminputs {
    display: flex;
    flex-flow: row;
    justify-content: center;
}
.salesdetailforminputs .salesdetailformi {
    width: auto;
}
.salesdetailforminputs .salesdetailinputsep {
    margin: 5px 20px;
}
.salesdetailinnercontainer .salesdetailcontentcontainer {
    height: 65%;
    width: 100%;
}
.salesdetailcontentcontainer .salesdetailnodatacontainer{
    height: 100%;
    width: 100%;
    display: none;
}
.salesdetailcontentcontainer .salesdetaildatacontainer {
    height: 100%;
    width: 100%;
    text-align: center;
    overflow: scroll;
}
.salesdetaildatacontainer .salesdetaildatatable {
    height: 100%;
    width: 100%;
}
.salesdetaildatacontainer::-webkit-scrollbar {
    display: none;
}

/* purchasedetail.php */
.purchasedetailoutercontainer {
    height: 100%;
    width: 100%;
    background: url(assets/images/loginbg.webp);
    background-size: cover;
}
.purchasedetailoutercontainer .purchasedetailinnercontainer {
    height: 97%;
    width: 97%;
    border-radius: 18px;
    background-color: white;
    position: relative;
}
.purchasedetailinnercontainer .purchasedetailheadercontainer {
    padding: 10px;
    border-bottom: 1px solid rgb(227, 227, 227);
    height: 35%;
}
.purchasedetailheadercontainer .purchasedetailform .purchasedetailforminputs {
    display: flex;
    flex-flow: row;
    justify-content: center;
}
.purchasedetailforminputs .purchasedetailformi {
    width: auto;
}
.purchasedetailforminputs .purchasedetailinputsep {
    margin: 5px 20px;
}
.purchasedetailinnercontainer .purchasedetailcontentcontainer {
    height: 65%;
    width: 100%;
}
/* .purchasedetailcontentcontainer .purchasedetailnodatacontainer{
    height: 100%;
    width: 100%;
    display: none;
} */
.purchasedetailcontentcontainer .purchasedetaildatacontainer {
    height: 100%;
    width: 100%;
    text-align: center;
}
.purchasedetaildatacontainer .purchasedetaildatatable {
    height: 100%;
    width: 100%;
}

/* srp.php */
.srpcontainer {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background: url(assets/images/loginbg.webp);
    background-size: cover;
}

.srpcontainer .srpinnercontainer {
    width: 70%;
    height: 100%;
    background-color: #fff;
}

.srpinnercontainer .srpform {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.srpinnercontainer .srpformcontainer {
    height: calc((100%)/5);
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-size: 17px;
}

.srpinnercontainer .srpformcontainer .srpformlabel {
    margin-right: 20px;
}

.srpinnercontainer .srpformcontainer input {
    font-size: 16px;
    width: 80%;
    text-transform: uppercase;
}

.srpinnercontainer .srpheadingcontainer {
    width: 100%;
    border-bottom: 1px solid rgb(227, 227, 227);
}

.srpformcontainer .srpheading {
    font-size: 22px;
    font-weight: 400;
}

.srpformcontainer .srpsubmitbtn {
    padding: 5px 20px;
    border-radius: 18px;
    cursor: pointer;
    font-size: 20px;
}

.srpformcontainer .srpsubmitbtn:hover {
    padding: 10px 30px;
    background-color: rgb(230, 226, 226);
}

.srpinnercontainer .srpsuccesscontainer {
    height: 90%;
    margin: 10px;
    width: 100%;
    border-radius: 15px;
    display: none;
    grid-template-rows: 1fr 1fr;
    background-color: white;
    
}
.srpsuccesscontainer .srpsuccesscontainer1,.srpsuccesscontainer .srpsuccesscontainer2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.srpsuccesscontainer .srpsuccesscontainer1 {
    font-size: 18px;
}
.srpsuccesscontainer .srpsuccesscontainer2 a {
    text-decoration: none;
    border: 1px solid black;
    color: black;
    padding: 3px 7px;
    border-radius: 5px;
}
/* nlc.php */
.nlccontainer {
    height: 100%;
    width: 100%;
    background: url('assets/images/loginbg.webp');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nlccontainer .nlcinnercontainer {
    height: 80%;
    width: 90%;
    display: grid;
    grid-template-rows: 1fr 1fr 2fr;
    grid-template-columns: 2fr 2fr 2fr;
    background-color: #fff;
    border-radius: 15px;
}
.nlcinnercontainer .nlcdatacontainer1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    border-bottom: 1px solid black;
    grid-area: 1/1/2/4;
}
.nlcinnercontainer .nlcdatacontainer2 {
    border-bottom: 1px solid rgb(227, 227, 227);
    grid-area: 2/1/3/4;
}
.nlcdatacontainer2 .nlcform {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.nlcform .nlcforminputcontainer1 {
    display: grid;
    grid-template-rows: 1fr 1fr;
}
.nlcform .nlcforminputcontainer1 .nlcforminputdiv {
    display: flex;
    justify-content: center;
    align-items: center;
}
.nlcform .nlcforminputcontainer1 .nlcforminputdiv .nlcproductmodelcontainer {
    position: relative;
    display: inline-block;
}
.nlcform .nlcforminputcontainer1 .nlcforminputdiv .nlcproductmodelcontainer .nlcproductsuggestioncontainer {
    height: 200px;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    overflow-y: scroll;
    overflow-x: scroll;
    display: none;
    border-bottom: 1px solid rgb(118, 118, 118);
    border-left: 1px solid rgb(118, 118, 118);
    border-right: 1px solid rgb(118, 118, 118);
    background-color: #fff;
    z-index: 10;
    width: 100%;
}
.nlcform .nlcforminputcontainer1 .nlcforminputdiv .nlcproductmodelcontainer .nlcproductsuggestioncontainer .nlcproductsuggestion {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.nlcform .nlcforminputcontainer1 .nlcforminputdiv .nlcproductmodelcontainer .nlcproductsuggestioncontainer .nlcproductsuggestion:hover {
    cursor: pointer;
    background-color: rgb(227, 227, 227);
}
.nlcform .nlcforminputcontainer2 {
    display: flex;
    font-size: 17px;
    justify-content: center;
    align-items: center;
}
.nlcform .nlcforminputcontainer2 .nlcformsubmit {
    font-size: 17px;
}
.nlcinnercontainer .nlcdatacontainer3 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-area: 3/1/4/2;
}
.nlcdatacontainer3 div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
}
.nlcdatacontainer3 div .nlcmodeldp {
    font-weight: 700;
    font-size: 17px;
}
.nlcinnercontainer .nlcdatacontainer4 {
    display: grid;
    grid-template-rows: 1fr 2fr 2fr;
    grid-area: 3/2/4/3;
}
.nlcdatacontainer4 .nlcdiscountdiv1 {
    display: flex;
    font-weight: 700;
    justify-content: center;
    align-items: center;
}
.nlcdatacontainer4 .nlcdiscountdiv2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.nlcdatacontainer4 .nlcdiscountdiv3 {
    display: grid;
    grid-template-rows: 1fr 1fr;
}
.nlcinnercontainer .nlcdatacontainer5 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-area: 3/3/4/4;
}
.nlcdiscountpercentageinput  {
    height: auto;
}
.nlcdatacontainer5 div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
}
.nlcdatacontainer5 div .nlcresultheading {
    font-weight: 700;
}




























/* width */

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


/* Track */

::-webkit-scrollbar-track {
    background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #888;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* for mobiles */
@media (max-width:480px){
    /* index.php */
    body {
        background: url("assets/images/loginbg.webp");
        background-size: cover;
    }
    .homepagecontainer {
        height: auto;
    }
    .homepagecontainer .homepagecontainer2 {
        width: 95%;
        margin-top: 10px;
        margin-bottom: 10px;
        flex-direction: column;
    }
    .homepagecontainer2 .homepagealertscontainer {
        width: 100%;
        height: 400px;
        border-bottom: 1px solid rgb(118, 118, 118);
        border-top-right-radius: 18px;
        border-bottom-left-radius: unset;
    }
    .homepagecontainer2 .homeinnercontainer {
        width: 100%;
        border: 0;
        border-bottom-left-radius: 18px;
        height: auto;
        overflow-y: unset;
    }
    /* addpurchase.php */
    .addpurchaseresultcontainer {
        width: 97%;
        height: 400px;
        margin-top: 20px;
    }
    .addpurchasemaincontainer {
        min-height: 100%;
     height: auto;   
    }
    .addpurchasegridcol1 .addpurchasedatacontainer .addpurchaseproductnamesuggestionbox div {
        font-size: 15px;
    }
    .addpurchasemaincontainer .addpurchasemainform {
        margin-top: 20px;
        min-height: 95vh;
        height: auto;
    }
    .addpurchasemainform .addpurchaseheadercontainer{
        height: auto;
    }
    .addpurchasechillclass,.addsaleschillclass {
        display: flex;
        flex-flow: column;
    }
    .addpurchasemainform .addpurchaseheadercontainer .addpurchaseheadercontainer1,.addpurchasemainform .addpurchaseheadercontainer .addpurchaseheadercontainer2 {
        flex-direction: column;
        height: auto;
    }
    .addpurchasemainform .addpurchaseheadercontainer .addpurchaseheadercontainer1 div,.addpurchasemainform .addpurchaseheadercontainer .addpurchaseheadercontainer2 div{
        margin: 5px 0;
    }
    .addpurchasemainform .addpurchasebodycontainer {
        min-height: 40vh;
        height: auto;
        margin-top: 30px;
    }
    .addpurchasemainform .addpurchasebodycontainer .addpurchasebodygridcontainer {
        min-height: 40vh;
        height: auto;
    }
    .addpurchasemainform .addpurchasenotecontainer {
        position: relative;
        bottom:0;
    }
    .addpurchasenotecontainer .addpurchasenotecol2container{
        width: 100%;
    }
    .addpurchasenotecontainer .addpurchasenotecol2container .addpurchasebackbtn {
        font-size: 16px;
        border: 0;
        padding: 12px 20px;
    }
    .addpurchasenotecontainer .addpurchasenotecol2container .addpurchaseavebtn {
        border: 0;
        font-size: 16px;
        height: auto;
    }
    .addpurchasemainform .addpurchasefootercontainer {
        min-height: 15vh;
        height: auto;
    }
    /* addsales.php */
    .addsalesmaincontainer {
        height: auto;
    }
    .addsalesmaincontainer .addsalesresultcontainer {
        width: 97%;
        height: 400px;
        margin-top: 20px;
    }
    .addsalesmaincontainer .addsalesmainform {
        margin: 20px 0px;
        height: auto;
    }
    .addsalesmainform .addsalesheadercontainer{
        height: auto;
    }
    
    .addsalesmainform .addsalesheadercontainer .addsalesheadercontainer1,.addsalesmainform .addsalesheadercontainer .addsalesheadercontainer2,.addsalesmainform .addsalesheadercontainer .addsalesheadercontainer3 {
        flex-direction: column;
        height: auto;
    }
    .addsalesmainform .addsalesheadercontainer .addsalesheadercontainer1 div,.addsalesmainform .addsalesheadercontainer .addsalesheadercontainer2 div,.addsalesmainform .addsalesheadercontainer .addsalesheadercontainer3 div{
        margin: 5px 0;
    }
    .addsaleshc1l ,.addsaleshc2l, .addsaleshc3l {
        display: block;
    }
    .addsalesmainform .addsalesbodycontainer {
        min-height: 40vh;
        height: auto;
        margin-top: 30px;
    }
    .addsalesmainform .addsalesbodycontainer .addsalesbodygridcontainer {
        min-height: 40vh;
        height: auto;
    }
    .addsalesgridcol1 .addsalesdatacontainer .addsalesproductnamesuggestionbox div {
        font-size: 13px;
        padding: 2px;
        background-color: #fff;
        overflow-x: scroll;
    }
    .addsalesmainform .addsalesnotecontainer {
        position: relative;
        bottom:0;
    }
    .addsalesnotecontainer .addsalesnotecol2container{
        width: 100%;
    }
    .addsalesnotecontainer .addsalesnotecol2container .addsalesbackbtn {
        font-size: 16px;
        border: 0;
        padding: 4px 20px;
        border-radius: 18px;
    }
    .addsalesnotecontainer .addsalesnotecol2container .addsalesavebtn {
        border: 0;
        font-size: 16px;
        border-radius: 18px;
        height: auto;
    }
    .addsalesmainform .addsalesfootercontainer {
        min-height: 20vh;
        height: auto;
        grid-template-columns: 6fr 3fr 3fr;
    }
    .addsalesfootercol2container .addsalestotalqtycontainer,.addsalesfootercol3container .addsalestotalamountcontainer {
        height: 20%;
    }
    .addsalesfootercol2container .addsalescarriagecheckboxcontainer,.addsalesfootercol3container .addsalescarriageamountcontainer {
        height: 30%;
    }
    /* addnewproduct.php */
    
    .newproductinnercontainer .newproductformcontainer {
        flex-direction: column;
    }
    .newproductcontainer .newproductinnercontainer {
        width: 97%;
        border-radius: 15px;
        margin: 20px 0px ;
    }
    /* srp.php */
    .srpinnercontainer .srpformcontainer {
        flex-direction: column;
    }
    .srpcontainer .srpinnercontainer {
        width: 97%;
        border-radius: 15px;
        margin: 20px 0px ;
    }
    .srpinnercontainer .srpsuccesscontainer {
        width: 99%;
        margin: 0;
    }
    /* addsuppliers.php */
    .addsuppliersinnercontainer .addsuppliersform {
        grid-template-rows: unset;
    }
    .addsuppliersform .addsuppliersformfields {
        text-align: center;
        flex-direction: column;
    }
    .addsuppliersform .addsuppliersformfields div label,.addsuppliersform .addsuppliersformfields div input {
        display: block;
        font-size: 16px;

    }
    /* addcustomers.php */
    .addcustomersinnercontainer .addcustomersform {
        grid-template-rows: unset;
    }
    .addcustomersform .addcustomersformfields {
        text-align: center;
        flex-direction: column;
    }
    .addcustomersform .addcustomersformfields div label,.addcustomersform .addcustomersformfields div input {
        display: block;
        font-size: 16px;
    }
    /* addtransaction.php */
    .addtransactionform .addtransactionformfield {
        flex-direction: column;
    }
    .addtransactionl {
        display: block;
    }
    .addtransactionfootercontainer .addtransactionfooterfield a,.addtransactionfootercontainer .addtransactionfooterfield input{
        font-size: 18px;
    }
    /* for gstdetails.php */
    .gstdetailsinnercontainer .gstdetailssection1 {
        height: auto;
    }
    .gstdetailssection1 .gstdetailssection1div1 {
        height: auto;
        padding: 20px 0;
    }
    .gstdetailssection1 .gstdetailssection1div2 {
        height: auto;
        padding: 10px 0;
    }
    .gstdetailssection2 .gstdetailsnoresultsection {
        height: 300px;
    }
    .gstdetailscontainer {
        height: auto;
    }
    .gstdetailscontainer .gstdetailsinnercontainer {
        height: auto;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .gstdetailssection1 .gstdetailssection1div2 .gstdetailsform {
        flex-direction: column;
    }
    .gstdetailsform .gstdetailsinputfields {
        margin: 5px 0;
    }
    .gstdetailssection2 .gstdetailssalessection,.gstdetailssection2 .gstdetailspurchasesection {
        flex-direction: column;
        height: auto;
    }
    .gstdetailssalessection .gstdetailssalesdiv1,.gstdetailspurchasesection .gstdetailspurchasediv1 {
        height: 20%;
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    .gstdetailssalessection .gstdetailssalesdiv2,.gstdetailspurchasesection .gstdetailspurchasediv2 {
        height: auto;
        width: 100%;
    }
    .gstdetailssalessection .gstdetailssalesdiv3,.gstdetailspurchasesection .gstdetailspurchasediv3{
        height: auto;
        display: flex;
        padding: 10px 0;
        flex-direction: row;
        width: 100%;
    }
    /* .gstdetailssalessection .gstdetailssalesdiv1 {

    } */
    .gstdetailssalesdiv1 div,.gstdetailspurchasediv1 div {
        height: 100%;
        padding: 10px 0;
        width: 50%;
    }
    .gstdetailssalesdiv2 .gstdetailssalesgstslab1,.gstdetailssalesdiv2 .gstdetailssalesgstslab2,.gstdetailspurchasediv2 .gstdetailspurchasegstslab1,.gstdetailspurchasediv2 .gstdetailspurchasegstslab2 {
        height: auto;
        flex-direction: column;
        border-top: 1px solid rgb(240, 240, 240);
        border-bottom: 1px solid rgb(240, 240, 240);
    }
    .gstdetailsgstslabdiv1,.gstdetailsgstslabdiv2,.gstdetailsgstslabdiv3 {
        height: auto;
        width: 100%;
    }
    .gstdetailsgstslabdiv3 {
        display: flex;
        flex-direction: row;
        padding: 10px 0;
    }
    .gstdetailssection2 .gstdetailsconclusionsection {
        height: auto;
        flex-direction: column;
    }
    .gstdetailsconclusionsection .gstdetailsconclusiondiv1 {
        height: auto;
        width: 100%;
        padding: 10px 5px;
        box-sizing: border-box;
    }
    .gstdetailsconclusionsection .gstdetailsconclusiondiv2 {
        flex-direction: row;
        height: auto;
        padding: 20px 0;
        width: 100%;
        border-bottom-left-radius: 18px;
    }
}
@media (max-width:550px){
    /* salesdetail.php */
    .salesdetailheadercontainer .salesdetailform .salesdetailforminputs,.purchasedetailheadercontainer .purchasedetailform .purchasedetailforminputs {
        flex-flow: column;
    }

}
/* for tablets */
@media (max-width:750px){
    .addpurchasebody {
        height: auto;
    }
    .addtransactionform .addtransactionformfield {
        flex-direction: column;
    }
    .addtransactionl {
        display: block;
    }
}





.simpleflex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}