div.footer {
    background: #c5b9b9;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

div.footer a {
    color: #84848484;
    margin-left: 30px;
    text-decoration: none;

}

div.footer a:hover {
    font-weight: bold;
    color: #f8a4b9;
    transition: 0.5 all;
}


#db1 {
    display: flex;
    flex-direction: row;

}

div.db2 {
    width: 20%;
    background: #323232;
    height: auto;
}

div.db6 {
    width: 80%;
    background: #f4f6f9;

}

h3.dblogo {
    color: #f685a1;
    font-size: 40px;
    text-align: center;
}

div.db3 {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    border-bottom: 1px solid #fff;
    padding-bottom: 20px;
}

div.db3 img {
    width: 80px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #f685a1;
    margin-right: 5px;
    vertical-align: middle;
}

div.db3 span {
    top: 20%;
    font-size: 18px;
    color: #fff;
    display: inline-block;
}

ul.db5.liMainMenu {
    margin-top: 20px;
    padding: 15px 0px;
}

ul.db5 li.liMainMenu.liMainMenu {
    text-transform: uppercase;
}

ul.db5 li.liMainMenu a {
    text-decoration: none;
    color: #fff;
    display: block;
    font-size: 14px;
    padding: 0px 15px;
    padding-bottom: 15px;
    padding-right: 0px;
    padding-top:15px;
}

ul.db5 li.liMainMenu a:hover {
    background: #f685a1;
    color: #fff;
    transition: 0.3s all;
}

ul.db5 li.liMainMenu a i {
    font-size: 23px;
    width: 30px;
}

div.dbtopnav {
    background: #fff;
    padding: 20px;
}

div.dbtopnav a {
    font-size: 18px;
    text-decoration: none;
    color: #84838383;
}

a#logoutbtn {
    float: right;
}

div.dbcontent {
    padding: 50px 10px 10px 10px;
}

div.dbmain {
    background: #fff;
    height: 100%;
    border: 1px solid #cdcdcd;
    padding-left: 20px;
    padding-bottom: 25px;
}

form::after {
    content: '';
    clear: both;
    display: block;
}

form.appForm {
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #cecfd0;
    border-radius: 5px;
    background: #f4f6f9;
}

form label {
    font-weight: bold;
    text-transform: uppercase;

}

form input {
    width: 100%;
    height: 33px;
    border: 1px solid #d6d7da;
    border-radius: 5px;

}

div.appFormInputContainer {
    margin-bottom: 15px;
}

div#userAddFormContainer {
    padding-top: 10px;
}

button.appBtn {
    background: #f685a1;
    border: 1px solid #f685a1;
    padding: 10px;
    margin-top: 20px;
    float: right;
}

div#errorMessage {
    background: #fff;
    text-align: center;
    color: red;
    font-size: 20px;
    padding: 11px;
}

p.responsemessage {
    font-size: 18px;
    text-align: center;
    margin-top: 33px;
    background: rgba(0, 128, 0, 0.1);
    padding: 20px;
}

p.responsemessage__error {
    background: rgba(228, 6, 6, 0.1);
}

p.responsemessage__success {
    background: rgba(0, 128, 0, 0.1);
}

div.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

div.column {
    width: 100%;
    padding: 0px 10px;
}

div.column-5 {
    width: 41.67%;
}

div.column-7 {
    width: 58.33%;
}

h1.section_header {
    font-size: 21px;
    color: #7b7c7d;
    padding: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid #ffd7e1;
    border-left: 4px solid #f690bf;
    margin-bottom: 15px;
}
td {
    border: 1px solid #cacaca;
}

/* table {
    width: 100%;
} */
table {
    min-width: fit-content;
    border-collapse: separate;
}

table th {
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    background: #f4f6f9;
    position: sticky;
        top: 0px;
        z-index: 2;
}

table td {
    font-size: 13px;
    text-align: center;

}.tbl-container {
    max-width: fit-content;
    max-height: fit-content;
}

.tbl-fixed {
    overflow-x: scroll;
    overflow-y: scroll;
    height: fit-content;
    max-height: 70vh;
    margin-top: 40px;
}td:first-child,
th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

td:nth-child(2),
th:nth-child(2) {
    position: sticky;
    left: 30px;
    z-index: 1;
}

th:first-child,
th:nth-child(3) {
    z-index: 3;
}

p.userCount {
    text-align: right;
    font-size: 15px;
    text-transform: uppercase;
    color: #f685a1;
    font-weight: bold;
}

a.subMenuLink {
    padding-left: 25px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    text-transform: none;
    font-size: 15px !important;
    color: #fff;
}

a.subMenuLink i{
    font-size: 16px !important;
    width: 16px !important;

}
i.mainMenuIconArrow {
    float: right;
    font-size: 19px !important;
    margin-top: 7px;
}
ul.subMenus{
    background: #c26a80;
    display: none;
}
ul.db5{
    padding: 0px 0px 0px;
}
.subMenuActive{
    font-weight: bold;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    background: #763a49;
}

#suppliersSelect{
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100px;
    border-color: #d2d2d2;

}
.productImages{
 width: 100px;
 height: 100px;

}

#suppliersSelect, #products{
    display: block;
    width: 100%;
    height: 100%;
    border-color: #d2d2d2;
}

.orderProductBtn{
    background: #d93f65;
    color: #fff;


}
.orderBtn{
    height: 33px;
    border: none;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 16px;

}
.orderBtn{
    height: 33px;
    border: none;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 16px;
}
.submitOrderProductBtn{
    background: #323232;
    color: #ffffff;
    font-size: 13px;
    padding: 8px 9px;

}

.marginTop20{
    margin-top: 20px;
}

.alighnRight{
    text-align: right;
}
#orderProductLists{
    margin-top: 20px;
}
.productNameSelect{
    font-size: 13px;
    border:none;
    background: #fafafa;
    padding: 3px 17px;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
}

div.orderProductRow{
    padding: 6px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 25px;
    padding-top: 25px;
}
#orderProductLists .row{
margin: 0px !important;

}
.suppliersRows .supplierName{
    margin-left: 12px;
    font-size: 15px;
    font-weight: bold;
    color: #a1a1a1;
    text-transform: uppercase;
}
.supplierRows .row{
    padding: 8px 0px;
}
.marginTop20{
    margin-top: 20px;
}
.productTextAreaInput{
    width: 100%;
    height: 75px;
    border-radius: 5px;
    border-color: #d7d7d7;
}
.orderProductQty{
    height: 33px;
    border: none;
    background: #f8f8f8;
    text-indent: 10px;
    border: 1px solid #d6d6d6;
    border-radius: 2px;
}
.removeOrderBtn{
background: #ff5858;
color: #fff;
}
.appbtn{
    border: none;
    padding: 4px 8px;
    background: #ff5858;
    border-radius: 2px;
    float: right;
}
.poList{
    margin-bottom:25px;
    padding: 15px;
    border-bottom: solid 1px #d1d1d1;
    border-radius: 5px;
    background: #fbfbfb;
}
.poList p{
    font-weight: bold;
    text-transform: uppercase;
    color: #d55f7d;
    font-size: 16px;
}
.poList table td, .poList table th{
    border: none;
    border-bottom: 1px solid green;
}
.poList table {
    border: none;
}
.poList table th{
    padding: 14px 10px;
    font-size: 13px;
}
.poOrderUpdateBtnContainer{
    margin-top: 20px;
}
.updatePoBtn{
    color: #f685a1;
    background: #fff;
    border: 1px solid #f685a1;
}
.updatePoBtn:hover{
    color: #fff;
    background: #f685a1;

}
.po-badge{
    padding: 4px 6px;
    border: 1px solid green;
    background: #b5ebb5;
}
.po-badge-pending{
    background: #ff7c76;
    border-color: #556455;
}
.po-badge-complete{
    background: #b5ebb5;
    border-color: green;

}
.alignLeft{
    text-align: left;
    
}
.po-badge-incomplete{
   background: #f7e640;
   color: #392b2b;
   border: #a3a3a3;
}
div.col50{
    width: 50%;
}
div.dbmain{
    display: flex;
    flex-direction: row;
}
.appDeliveryHistory:hover{
    background: #ff5722;
    color: #fff;
}
.appDeliveryHistory{
    border: 1px solid #ff5722;
    background: none;
}
.deliveryHistoryTable th{
    font-size: 14px;
    padding: 10px 20px;

}
.reportsTypeContainer{
    display: flex;
    justify-content: flex-start;
    padding: 10px 31px;


}

.reportType{
    border: 1px solid #C2C6C2;
    padding: 10px 24px;
    border-radius:4px;
    background: #fff;
    font-size:14px;
    margin-left: 21px;
    width: 100%;
}
.reportType:hover{
    background: #763a49;
    color: #fff;
}
.reportExportBtn{
    padding: 4px 15px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background: #f685a1;
    color: white;
    margin-left: 13px;
    font-size: 11px;
    border: 1px solid #f685a1;
}
.reportType p{
    font-size: 20px;
    font-weight: 200;
    margin-bottom: 10px;
}
.reportExportBtn:hover{
    border:1px solid #f685a1;
    background: #fff;
    color: #f685a1;

}