body {
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  color: #333;
  background-color: #f9f9f9;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
}

h6 {
  font-size: 14px;
}

a {
  color: #005366;
  text-underline-offset: 2px;
}
a:hover {
  color: #002a33;
}

.btn {
  padding-right: 20px;
  padding-left: 20px;
  font-weight: 700;
  border-radius: 20px 20px 20px 20px !important;
}

.btn-close:focus, .btn-close:active {
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.btn-lg {
  font-size: 14px;
}

.btn-md {
  font-size: 14px;
}

.btn-primary {
  color: #ffffff;
  background: #005366;
  border: solid 1px #005366;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background: #006880;
  border: solid 1px #005366;
}

.btn-light {
  color: #333333;
  background: #f4f4f4;
  border: solid 1px #eaeaea;
  font-weight: 400;
}
.btn-light:hover, .btn-light:active, .btn-light:focus {
  background: #f7f7f7;
  border: solid 1px #eaeaea;
}

.form-control {
  border: solid 1px #ccc !important;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
  border-radius: 10px 10px 10px 10px !important;
}

.form-select {
  border: solid 1px #ccc !important;
  border-radius: 10px 10px 10px 10px !important;
}

.form-select-sm {
  font-size: 14px;
}

.form-control-textarea {
  font-size: 14px;
}

.form-control-md,
.form-select-md {
  height: 45px;
  font-size: 14px !important;
}

.form-control-xl {
  height: 50px;
  font-size: 14px !important;
}

.form-control-gray {
  background-color: #f4f4f4 !important;
  border: solid 1px #f4f4f4 !important;
}

.form-control-primary {
  background-color: #ffffff !important;
}

.input-group {
  border: solid 1px #ccc !important;
  border-radius: 10px 10px 10px 10px !important;
}
.input-group .form-control {
  border: none !important;
}
.input-group .input-group-text {
  border: none !important;
  background: #ffffff;
  font-size: 14px;
  border-radius: 10px 10px 10px 10px !important;
}

.form-alert {
  margin-top: 3px;
}

.form-alert-danger {
  color: #dc3545 !important;
}

.form-alert-success {
  color: #28a745 !important;
}

.form-alert-info {
  color: #17a2b8 !important;
}

.form-alert-warning {
  color: #df9400 !important;
}

.form-data label {
  font-weight: 700;
  padding-bottom: 5px;
}
.form-data h5 {
  padding-bottom: 5px;
  margin-bottom: 5px;
  font-size: 17px;
}

#form-data .btn {
  margin: 2px 0;
}

.card {
  padding-top: 15px;
  padding-bottom: 15px;
  border: none;
  box-shadow: 0 0 50px 0 rgba(204, 204, 204, 0.4);
  -webkit-box-shadow: 0 0 50px 0 rgba(204, 204, 204, 0.4);
}

.card-header {
  background: #ffffff;
  border: none;
}

.card-footer {
  background: #ffffff;
  border: none;
}

.table-lg th,
.table-lg td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: solid 1px #eaeaea;
}
.table-lg th {
  font-weight: 700;
}
.table-lg th a {
  color: #333333;
}
.table-lg td a {
  text-decoration: underline !important;
}

.alert-secondary {
  background-color: #f4f4f4;
  border: none;
}

.table-detail th:first-child, .table-detail td:first-child {
  padding-left: 0 !important;
}

.table-primary td {
  background-color: #ffffff;
}
.table-primary th {
  background-color: #005366;
  color: #ffffff;
}

.table-bottom td {
  border: none !important;
  padding-bottom: 3px !important;
}

.table-bottom-sm td {
  border: none !important;
  padding-bottom: 0 !important;
  padding-top: 5px !important;
}

.table-report th, .table-report td {
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
}

.pagination .page-link {
  color: #84d3e5;
}
.pagination .active .page-link {
  color: #ffffff;
  background: #005366;
  border: solid 1px #005366;
}

.dropdown-menu {
  font-size: 14px;
}

.modal-body {
  background-color: #f9f9f9;
}

.sidenav {
  color: #84d3e5;
  background-color: #005366;
  position: fixed;
  width: 250px;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  overflow-y: scroll;
}
.sidenav::-webkit-scrollbar {
  width: 5px;
}
.sidenav::-webkit-scrollbar-track {
  background: #005366;
}
.sidenav::-webkit-scrollbar-thumb {
  background: #007d99;
}
.sidenav::-webkit-scrollbar-thumb:hover {
  background: #0091b3;
}

.sidenav-heading {
  padding: 10px 10px;
  border-bottom: solid 1px #004252;
}

.sidenav-title {
  padding: 0 10px;
  font-weight: 700;
}

.sidenav-item .card-body {
  background: #006880;
  padding: 10px 15px;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.sidenav-item .sidenav-item-link {
  display: block;
  color: #84d3e5;
  text-decoration: none;
  padding: 4px 8px;
  font-weight: 400;
  text-transform: capitalize;
}
.sidenav-item .sidenav-item-link .sidenav-item-link-icon {
  display: inline-block;
  width: 20px;
  text-align: center;
  font-size: 16px;
}
.sidenav-item .sidenav-item-link:hover,
.sidenav-item .active {
  border-left: solid 2px #16697c !important;
  padding-left: 6px;
  color: #84d3e5 !important;
  text-decoration: underline;
}
.sidenav-item .sidenav-item-dropdown-link {
  display: block;
  color: #84d3e5;
  text-decoration: none;
  padding: 4px 0;
  border-left: solid 2px #84d3e5;
  margin-left: 10px;
  padding-left: 15px;
}
.sidenav-item .sidenav-item-dropdown-link:hover,
.sidenav-item .active {
  border-left: solid 2px #84d3e5;
  color: #005366;
}
.sidenav-item .sidenav-icon {
  text-align: center;
  width: 20px;
  font-size: 15px;
  margin-right: 7px;
}

.sidenav-toggler {
  font-size: 20px;
}

.sidenav-toggler-icon {
  color: #333333;
}
.sidenav-toggler-icon:hover {
  color: #4d4d4d;
}

.sidenav-box {
  background-color: #16697c;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0 5px 0 10px;
  border-radius: 5px 5px 5px 5px !important;
}

.sidenav-separator {
  height: 2px;
  margin: 3px 0 3px 0;
  background-color: #005366;
}

.sidenav-footer {
  padding: 10px 15px;
}
.sidenav-footer a {
  color: #84d3e5;
  text-decoration: none;
}

.header {
  position: fixed;
  width: 100%;
  background-color: #ffffff;
  padding: 15px 10px;
  box-shadow: 0 0 50px 0 rgba(204, 204, 204, 0.4);
  -webkit-box-shadow: 0 0 50px 0 rgba(204, 204, 204, 0.4);
  z-index: 998;
}

.header-content {
  margin-left: 250px;
}

.main {
  margin-left: 250px;
  padding-top: 80px;
  padding-left: 10px;
  padding-right: 10px;
}

.badge {
  font-weight: 800 !important;
}

.badge-pill-success {
  border: solid 2px #28a745;
  color: #28a745;
}

.badge-pill-info {
  border: solid 2px #17a2b8;
  color: #17a2b8;
}

.badge-pill-warning {
  border: solid 2px #df9400;
  color: #df9400;
}

.badge-pill-danger {
  border: solid 2px #dc3545;
  color: #dc3545;
}

.bg-warning {
  color: #333 !important;
}

.profile-icon {
  border: solid 5px #333333;
  display: inline-block;
  width: 100px;
  height: 100px;
  font-size: 60px;
  position: relative;
}
.profile-icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav-tabs {
  border-bottom: solid 2px #005366;
}
.nav-tabs .nav-link {
  padding-left: 30px;
  padding-right: 30px;
  font-weight: 700;
  color: #333 !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background-color: #005366;
  color: #ffffff !important;
  border: solid 2px #005366;
}

.nav .dropdown-item {
  font-size: 14px;
}
.nav .dropdown-item:hover {
  background-color: #005366;
  color: #ffffff;
}
.nav .nav-link {
  color: #005366 !important;
}

.link-ununderline a {
  text-decoration: none !important;
}

.datepicker-days .day {
  padding: 5px;
}

.datepicker {
  z-index: 999 !important;
}

.highlight {
  background-color: #ffff88;
}

.select2-container--bootstrap-5 .select2-selection {
  font-size: 14px !important;
  padding-top: 12px !important;
  padding-left: 15px;
  padding-right: 15px;
  min-height: 47px !important;
  border: solid 1px #ccc !important;
  border-radius: 10px 10px 10px 10px !important;
}

.datepicker-days {
  padding: 10px;
}
.datepicker-days .day {
  padding: 7px;
}

.datepicker {
  padding: auto !important;
  border-radius: auto !important;
}

.ingredient-content {
  border-bottom: solid 1px #ccc;
}

.content-title h5 {
  font-size: 15px !important;
  margin-bottom: 10px;
}

.box-counter {
  position: relative;
  color: #fff;
  border-radius: 10px 10px 10px 10px !important;
}
.box-counter a {
  text-decoration: none;
  color: #fff;
}
.box-counter h1 {
  margin-bottom: 0;
}
.box-counter:hover {
  opacity: 0.9;
}
.box-counter:before {
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  font-size: 60px;
  top: 0;
  right: 0;
  margin-right: 20px;
  opacity: 0.3;
  color: #fff;
}

.bg-order {
  background-color: #00A19D;
}
.bg-order:before {
  content: "\f290";
}

.bg-order-process {
  background-color: #76b5c5;
}
.bg-order-process:before {
  content: "\f59d";
}

.bg-order-delivery-pending {
  background-color: #628395;
}
.bg-order-delivery-pending:before {
  content: "\f48c";
}

.bg-order-payment-pending {
  background-color: #6F4C5B;
}
.bg-order-payment-pending:before {
  content: "\f2e9";
}

.bg-order-payment-confirmation-pending {
  background-color: #406343;
}
.bg-order-payment-confirmation-pending:before {
  content: "\f155";
}

.bg-order-payment-due-date {
  background-color: #8D2828;
}
.bg-order-payment-due-date:before {
  content: "\f017";
}

.bg-order-return-pending {
  background-color: #A03C78;
}
.bg-order-return-pending:before {
  content: "\f0ec";
}

.bg-purchase {
  background-color: #22577A;
}
.bg-purchase:before {
  content: "\f07a";
}

.bg-purchase-payment-pending {
  background-color: #B05B3B;
}
.bg-purchase-payment-pending:before {
  content: "\f2e9";
}

.bg-item-rop {
  background-color: #488FB1;
}
.bg-item-rop:before {
  content: "\f468";
}

.bg-transaction-highlight {
  background-color: #1C6758;
}
.bg-transaction-highlight:before {
  content: "\f46d";
}

.bg-stock-opname-highlight {
  background-color: #367E18;
}
.bg-stock-opname-highlight:before {
  content: "\f1b3";
}

.bg-invoice-payment-confirmation {
  background-color: #CC3636;
}
.bg-invoice-payment-confirmation:before {
  content: "\f570";
}

.bg-invoice-unpaid {
  background-color: #E14D2A;
}
.bg-invoice-unpaid:before {
  content: "\f543";
}

.tracking-icon {
  display: inline-block;
  width: 50px;
  background-color: #005366;
  color: #ffffff;
  border: solid 1px;
  text-align: center;
  padding: 10px;
  font-size: 20px;
  border-radius: 5px 5px 5px 5px !important;
}

.nav .active {
  background-color: #005366 !important;
}

.whatsapp-support {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 25px;
  background-color: #25D366;
}
.whatsapp-support span {
  color: #fff;
  font-weight: 700;
}
.whatsapp-support:hover {
  background-color: #21bd5c;
}

.footer-copyright, .powered {
  color: #989898;
  font-weight: 600;
}

.powered a {
  color: #777;
}