@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --primary: #05B050;
  --secondary: #f8b940;
  --secondary-dark: #FB8A2E;
  --tertiary: #232B39;
  --menubar-gradient: #29333F;
  --background: #F1F1F1;
  --danger: #C32021;
  --support-primary: #0065FF;
  --support-secondary: #A3CF73;
  --primary-hover: #321f69;
  --primary-dark: #0d081a;
  --table-head: #121330;
  --text-bold: #4A4754;
  --white: #FFFFFF;
  --font-header: "Poppins";
  --font-body: "Maven Pro";
  --font-table: "Maven Pro";
  --font-button: "Maven Pro";
  --slider-height: 8;
  --ball-height: var(--slider-height) * 1.5;

}
body{
  font-family: var(--font-body);
}
/* .active {
  color:#495057 !important;
} */
.btn-primary-subtle {
  background-color: #121330;
  color: white;
}
/* .dark_blue {
  background-color: rgb(18 19 48);
  color: white;
} */
#preloader {
  background-color: var(--background);
}
.text {
  color: #009440;
}
.text-orange {
  color: #efd1ad;
}
.border_orange {
  border-color: var(--secondary) !important;
}
/* background */
.bg-orange-light {
  background-color: #efdbb8;
}
.tertiary-color {
  color: var(--tertiary);
}
/* --------------------------------- Button --------------------------------- */
.btn-primary:hover, .btn-outline-primary:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.btn-primary-2 {
  background-color: white;
  border: 1px solid var(--primary);
}

.btn-primary-2:hover {
  background-color: white;
  border: 1px solid var(--primary);
}
.btn-green {
  /* background: #299e4a !important; */
  background: #05B050 !important;
  color: white;
}
.btn-orange {
  background: #ed8030 !important;
  color: white;
}
/* hover buttons */
.btn-green:hover {
  background: var(--primary) !important;
  color: white;
}
.btn-orange:hover {
  background: var(--secondary) !important;
  color: white;
}
/* --------------------------------- SIDEBAR -------------------------------- */
.sidebar-active {
  background-color: var(--primary);
}

.sidebar-active span {
  color: white;
}

/* ----------------------------- Cursor pointer ----------------------------- */
.cursor {
  cursor: pointer;
}

/* Buttons area */
.view {
  background-color: #fb8a2e;
  color: #fff;
  width: 140px;
}

/* Select area */
.select {
  height: 300px;
  width: 95%;
  border-radius: 2px;
  background-color: #fff;
}

.up {
  width: 140px;
}

.searchMechantInput {
  width: 85%;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #e8e8e8;
}

.tablecard {
  background-color: transparent;
  border: none;
}
.table {
  font-family: var(--font-table-td);
}
.table thead {
  background-color: var(--table-head);
  color: white;
}
.table thead tr th {
  padding-top: 15px;
  padding-bottom: 15px;
}
.table tbody tr {
  background-color: var(--white);
}
.table tbody tr td .td-bold {
  color: var(--text-bold);
  font-weight: 700;
}
.table tbody tr:nth-child(even) {
  /* background-color: rgb(238 238 238); */
}
.table tbody .tr-spacer {
  height: 20px;
}

#stateFilterSelect {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #05b050;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* padding-right: 24px; */
}

select::after {
  content: “\25b6”;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* Tabs */
/* Estilos para desktop */

.tabcontent {
  display: none;
  padding: 20px;
  top: 50px;
}

.tabcontent h3 {
  margin-top: 0;
}

/* Estilos para mobile */
@media screen and (max-width: 600px) {
  .tabcontent {
    padding: 0 18px;
    overflow: hidden;
    background-color: #f1f1f1;
    display: none;
    position: initial;
  }
}

.tab-active {
  background-color: rgb(35 43 57);
  border: none;
  color: white;
}

.cursor_pointer {
  cursor: default;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* -------------------------------------------------------------------------- */
/*                                    CARD                                    */
/* -------------------------------------------------------------------------- */
.product-card-body {
  padding: 9px 10px 12px 10px;
}
.product-card-body img {
  border-radius: 3px;
}
.product-card-img {
  width: 223px;
  height: 147px;
  object-fit: cover;
}
.product-card-body .sus-container {
  border-radius: 2px;
  font-family: var(--font-header);
  font-size: 14px;
  font-weight: 600;
}
/* -------------------------------------------------------------------------- */
/*                                    CARD                                    */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                 ADD PRODUCT                                */
/* -------------------------------------------------------------------------- */
.p-img-uploadbox {
  padding: 10px 15px;
  border-radius: 8px;
  background-image: repeating-linear-gradient(-24deg, #d9d9d9, #d9d9d9 27px, transparent 27px, transparent 40px, #d9d9d9 40px), repeating-linear-gradient(66deg, #d9d9d9, #d9d9d9 27px, transparent 27px, transparent 40px, #d9d9d9 40px), repeating-linear-gradient(156deg, #d9d9d9, #d9d9d9 27px, transparent 27px, transparent 40px, #d9d9d9 40px), repeating-linear-gradient(246deg, #d9d9d9, #d9d9d9 27px, transparent 27px, transparent 40px, #d9d9d9 40px);
  background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
}
/* -------------------------------------------------------------------------- */
/*                                 ADD PRODUCT                                */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                    MODAL                                   */
/* -------------------------------------------------------------------------- */
.filter-modal-title {
  font-family: var(--font-header);
  font-weight: 400;
  font-size: 18px;
}
.filter-modal-title span {
  font-family: var(--text-bold);
  font-weight: 600;
}
.advancefilter-select {
  width: 65%;
  padding: 8px 10px;
  border-radius: 4px;
  border: 2px solid var(--primary);
  font-family: var(--font-button);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-bold);
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>'); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px; /* Adjust size of the arrow */
}

/* Slider Range */
.range-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.range-group {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
}

.range-input {
  width: 100%;
  height: 3px;
  border-radius: 5px;
  background-color: var(--primary);
  outline: none;
  -webkit-appearance: none;
  margin-top: 5px;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--primary);
  cursor: pointer;
}

.number-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.number-input {
  width: 80%;
  height: 29px;
  border: none;
  background-color: #EDEDEE;
  color: #A9A9A9;
  padding: 5px;
  border-radius: 5px;
}

.min-label,
.max-label {
    font-weight: bold;
}

.separator {
    margin: 0 5px;
}
/* -------------------------------------------------------------------------- */
/*                                    MODAL                                   */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                               RECEIPT SECTION                              */
/* -------------------------------------------------------------------------- */
.receipt-wrapper {
  border: .6px solid rgba(0, 0, 0, .18);
}
.receipt-wrapper .row div {
  border: .6px solid rgba(0, 0, 0, .18);
  font-size: 12px;
}
/* -------------------------------------------------------------------------- */
/*                               RECEIPT SECTION                              */
/* -------------------------------------------------------------------------- */