.custom-icon {
    height: 20px;
    width: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.custom-icon-header {
    height: 20px;
    width: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.arrow-icon {
    position: absolute;
    right: 15px;
    height: 10px;
    width: 10px;
    min-width: 10px !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("/assets/template-admin/icons/IconRightArrow.svg");
    background-position: right;
}

.dashboard-icon {
    background-image: url("/assets/template-admin/icons/IconDashboard.svg");
}

.expense-icon {
    background-image: url("/assets/template-admin/icons/IconExpense.svg");
}

.inventory-icon {
    background-image: url("/assets/template-admin/icons/IconInventory.svg");
}

.warehouse-icon {
    background-image: url("/assets/template-admin/icons/IconWarehouse.svg");
}

.production-icon {
    background-image: url("/assets/template-admin/icons/IconProduction.svg");
}

.purchase-icon {
    background-image: url("/assets/template-admin/icons/IconPurchase.svg");
}

.order-icon {
    background-image: url("/assets/template-admin/icons/IconOrder.svg");
}

.account-icon {
    background-image: url("/assets/template-admin/icons/IconAccount.svg");
}

.user-icon {
    background-image: url("/assets/template-admin/icons/IconUser.svg");
}

.setting-icon {
    background-image: url("/assets/template-admin/icons/IconSetting.svg");
}

.transfer-icon {
    background-image: url("/assets/template-admin/icons/IconTransfer.svg");
}

.transaction-icon {
    background-image: url("/assets/template-admin/icons/IconTransection.svg");
}

.report-icon {
    background-image: url("/assets/template-admin/icons/IconReport.svg");
}

.notification-icon {
    background-image: url("/assets/template-admin/icons/IconNotification.svg");
}

.brightness-icon {
    background-image: url("/assets/template-admin/icons/IconBrightNess.svg");
}

.expand-icon {
    background-image: url("/assets/template-admin/icons/IconExpand.svg");
}

.nav-item:hover .dashboard-icon {
    background-image: url("/assets/template-admin/icons/IconDashboardColor.svg");
}

.nav-item:hover .expense-icon {
    background-image: url("/assets/template-admin/icons/IconExpenseColor.svg");
}

.nav-item:hover .inventory-icon {
    background-image: url("/assets/template-admin/icons/IconInventoryColor.svg");
}

.nav-item:hover .warehouse-icon {
    background-image: url("/assets/template-admin/icons/IconWarehouseColor.svg");
}

.nav-item:hover .production-icon {
    background-image: url("/assets/template-admin/icons/IconProductionColor.svg");
}

.nav-item:hover .purchase-icon {
    background-image: url("/assets/template-admin/icons/IconPurchaseColor.svg");
}

.nav-item:hover .order-icon {
    background-image: url("/assets/template-admin/icons/IconOrderColor.svg");
}

.nav-item:hover .account-icon {
    background-image: url("/assets/template-admin/icons/IconAccountColor.svg");
}

.nav-item:hover .user-icon {
    background-image: url("/assets/template-admin/icons/IconUserColor.svg");
}

.nav-item:hover .setting-icon {
    background-image: url("/assets/template-admin/icons/IconSettingColor.svg");
}

.nav-item:hover .transfer-icon {
    background-image: url("/assets/template-admin/icons/IconTransferColor.svg");
}

.nav-item:hover .transaction-icon {
    background-image: url("/assets/template-admin/icons/IconTransectionColor.svg");
}

.nav-item:hover .report-icon {
    background-image: url("/assets/template-admin/icons/IconReportColor.svg");
}


.active > .dashboard-icon {
    background-image: url("/assets/template-admin/icons/IconDashboardColor.svg");
}


.active > .expense-icon {
    background-image: url("/assets/template-admin/icons/IconExpenseColor.svg");
}

.active > .inventory-icon {
    background-image: url("/assets/template-admin/icons/IconInventoryColor.svg");
}

.active > .warehouse-icon {
    background-image: url("/assets/template-admin/icons/IconWarehouseColor.svg");
}

.active > .production-icon {
    background-image: url("/assets/template-admin/icons/IconProductionColor.svg");
}

.active > .purchase-icon {
    background-image: url("/assets/template-admin/icons/IconPurchaseColor.svg");
}

.active > .order-icon {
    background-image: url("/assets/template-admin/icons/IconOrderColor.svg");
}

.active > .account-icon {
    background-image: url("/assets/template-admin/icons/IconAccountColor.svg");
}

.active > .user-icon {
    background-image: url("/assets/template-admin/icons/IconUserColor.svg");
}

.active > .setting-icon {
    background-image: url("/assets/template-admin/icons/IconSettingColor.svg");
}

.active > .transfer-icon {
    background-image: url("/assets/template-admin/icons/IconTransferColor.svg");
}

.active > .transaction-icon {
    background-image: url("/assets/template-admin/icons/IconTransectionColor.svg");
}

.active > .report-icon {
    background-image: url("/assets/template-admin/icons/IconReportColor.svg");
}

.nav-link:hover .arrow-icon {
    background-image: url("/assets/template-admin/icons/IconRightArrowColor.svg");
}

.navbar-menu .navbar-nav .nav-link[aria-expanded=true] > .arrow-icon {
    background-image: url("/assets/template-admin/icons/IconDownArrowColor.svg");
}

.icon-btn {
    border: none;
    border-radius: 7px;
    background-repeat: no-repeat;
    width: 31px;
    height: 31px;
    background-position: center;
    display: inline-block;
}

.icon-add-warehouse {
    background-color: #FFF4CC;
    background-image: url("/assets/images/icons/addWarehouse.svg");
}

.icon-add-supplier {
    background-color: #D9F7F5;
    background-image: url("/assets/images/icons/addSupplier.svg");
}

.icon-add-customer {
    background-color: #D9F7F5;
    background-image: url("/assets/images/icons/addCustomers.svg");
}

.icon-list-acc {
    background-color: #E4E0EE;
    background-image: url("/assets/images/icons/listAccounts.svg");
}

.icon-printer {
    background-color: #E1F0B5;
    background-image: url("/assets/images/icons/printer.svg");
}

.icon-add-purchase {
}

.icon-add-sale {
    background-color: #E8E9FC;
    background-image: url("/assets/images/icons/addSale.svg");
}

.icon-add-user {
    background-color: #D9F9E6;
    background-image: url("/assets/images/icons/addUser.svg");
}

.icon-add-transaction {
    background-color: #D9F8FF;
    background-image: url("/assets/images/icons/addTransection.svg");
}

.icon-delete {
    background-color: #FFDFDF;
    background-image: url("/assets/images/icons/delete.svg");
}

.icon-edit {
    background-color: #D9E8FF;
    background-image: url("/assets/images/icons/update.svg");
}

.icon-qc {
    background-color: #D9ECF2;
    background-image: url("/assets/images/icons/qc.svg");
}

.icon-approve {
    background-color: #D9F9E6;
    background-image: url("/assets/images/icons/approve.svg");
}

.icon-permission {
    background-color: #D9F7F5;
    background-image: url("/assets/images/icons/addSupplier.svg");
}

.icon-show {
    background-color: rgba(239, 139, 5, 0.37);
    background-image: url("/assets/images/icons/show.svg");
}

.icon-confirm {
    background-color: #C7FFF1;
    background-image: url("/assets/images/icons/confirm.svg");
}

/*on Hover*/


.icon-add-warehouse:hover {
    background-color: #FFB800;
    background-image: url("/assets/images/icons/addWarehouseH.svg");
}

.icon-add-supplier:hover {
    background-color: #00C9BD;
    background-image: url("/assets/images/icons/addSupplierH.svg");
}

.icon-add-customer:hover {
    background-color: #00C9BD;
    background-image: url("/assets/images/icons/addCustomersH.svg");
}

.icon-list-acc:hover {
    background-color: #492E8D;
    background-image: url("/assets/images/icons/listAccountsH.svg");
}

.icon-printer:hover {
    background-color: #658609;
    background-image: url("/assets/images/icons/printerH.svg");
}

.icon-add-purchase:hover {
}

.icon-add-sale:hover {
    background-color: #1820DE;
    background-image: url("/assets/images/icons/addSaleH.svg");
}

.icon-add-user:hover {
    background-color: #00D957;
    background-image: url("/assets/images/icons/addUserH.svg");
}

.icon-add-transaction:hover {
    background-color: #00CAF6;
    background-image: url("/assets/images/icons/addTransectionH.svg");
}

.icon-delete:hover {
    background-color: #F50303;
    background-image: url("/assets/images/icons/deleteH.svg");
}

.icon-edit:hover {
    background-color: #06F;
    background-image: url("/assets/images/icons/updateH.svg");
}

.icon-qc:hover {
    background-color: #007EA6;
    background-image: url("/assets/images/icons/qcH.svg");
}

.icon-approve:hover {
    background-color: #00D856;
    background-image: url("/assets/images/icons/approveH.svg");
}

.icon-permission:hover {
    background-color: #00C9BD;
    background-image: url("/assets/images/icons/addSupplierH.svg");
}

.icon-show:hover {
    background-color: #EF8B05;
    background-image: url("/assets/images/icons/showH.svg");
}

.icon-confirm:hover {
    background-color: #17D6A8;
    background-image: url("/assets/images/icons/confirmH.svg");
}


/* Add or Create Button*/
.add-new-btn {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/plus.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #BCE8D4;
    color: #00914E;
    background-position: 11px;
    font-weight: 400;
}

/* Add or Create Button*/
.add-new-btn:hover {
    background-image: url("/assets/images/icons/plusH.svg");
    background-color: #00914E;
    color: white;
}

.setup-btn {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/setup.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #BEFAD6;
    color: #00D856;
    background-position: 11px;
    font-weight: 400;
}

.setup-btn2 {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/setup2.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #FDE4DC;
    color: #F24A17;
    background-position: 11px;
    font-weight: 400;
}

.setup-btn2:hover {
    background-image: url("/assets/images/icons/setupH.svg");
    background-color: #F24A17;
    color: white;
}

/* Add or Create Button*/
.setup-btn:hover {
    background-image: url("/assets/images/icons/setupH.svg");
    background-color: #00D856;
    color: white;
}

.make-active-btn {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/makeActive.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #DAF2FF;
    color: #06A5FF;
    background-position: 11px;
    font-weight: 400;
    background-size: 15px 15px;

}

.make-active-btn:hover {
    background-image: url("/assets/images/icons/makeActiveH.svg");
    background-color: #06A5FF;
    color: white;
}
.confirm-audit-btn {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/confirmAudit.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #F9D9FB;
    color: #D500E2;
    background-position: 11px;
    font-weight: 400;
    background-size: 15px 15px;
}

.confirm-audit-btn:hover {
    background-image: url("/assets/images/icons/confirmAuditH.svg");
    background-color: #D500E2;
    color: white;
}
.confirm-approve-btn {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/approve.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #BEFAD6;
    color: #00D856;
    background-position: 11px;
    font-weight: 400;
    background-size: 15px 15px;
}

.confirm-approve-btn:hover {
    background-image: url("/assets/images/icons/approveH.svg");
    background-color: #00D856;
    color: white;
}
.cancel-btn {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/cancel.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #FFEAEA;
    color: red;
    background-position: 11px;
    font-weight: 400;
    background-size: 13px 13px;
}

.cancel-btn:hover {
    background-image: url("/assets/images/icons/cancelH.svg");
    background-color: red;
    color: white;
}
.submit-btn {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/confirm.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #C7FFF1;
    color: #17D6A8;
    background-position: 11px;
    font-weight: 400;
    background-size: 13px 13px;}

.submit-btn:hover {
    background-image: url("/assets/images/icons/confirmH.svg");
    background-color: #17D6A8;
    color: white;
}
.hold-btn {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/hold.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #FEEAD4;
    color: #EDAD66;
    background-position: 11px;
    font-weight: 400;
    background-size: 13px 13px;}

.hold-btn:hover {
    background-image: url("/assets/images/icons/holdH.svg");
    background-color: #EDAD66;
    color: white;
}

.print-btn {
    border: none;
    border-radius: 7px;
    background-image: url("/assets/images/icons/printer.svg");
    background-repeat: no-repeat;
    padding: 7px 9px 6px 28px;
    background-color: #D6CFAE;
    color: #658609;
    background-position: 11px;
    font-weight: 400;
    background-size: 13px 13px;
}

.print-btn:hover {
    background-image: url("/assets/images/icons/printerH.svg");
    background-color: #658609;
    color: white;
}