:root, [data-bs-theme=light] {
	--bs-blue: #0d6efd;
	--bs-dark-blue:#0a58ca;
	--bs-indigo: #6610f2;
	--bs-purple: #6f42c1;
	--bs-pink: #d63384;
	--bs-red: #dc3545;
	--bs-orange: #fd7e14;
	--bs-yellow: #ffc107;
	--bs-green: #198754;
	--bs-teal: #20c997;
	--bs-cyan: #0dcaf0;
	--bs-black: #000;
	--bs-primary: #0d6efd;
	--bs-secondary: #6c757d;
	--bs-success: #02c27a;
	--bs-info: #0dcaf0;
	--bs-warning: #ffc107;
	--bs-danger: #fc185a;
	--bs-light: #f8f9fa;
	--bs-dark: #212529;

	--bs-success-rgb: 2, 194, 122;
	--bs-danger-rgb: 252, 24, 90;
    --bs-heading-color:#474747;
    --bs-body-color: #5b6166;
    --bs-orange-rgb: rgb(253, 126, 20);
}


[data-bs-theme=dark] {
	  color-scheme: dark;
	--bs-body-color: #dee2e6;
	--bs-body-color-rgb: 222, 226, 230;
	--bs-body-bg: #212529;
	--bs-body-bg-2: #181c1f;
	--bs-body-bg-rgb: 33, 37, 41;
	--bs-emphasis-color: #fff;
	--bs-emphasis-color-rgb: 255, 255, 255;
	--bs-secondary-color: rgba(222, 226, 230, 0.75);
	--bs-secondary-color-rgb: 222, 226, 230;
	--bs-secondary-bg: #343a40;
	--bs-secondary-bg-rgb: 52, 58, 64;
	--bs-tertiary-color: rgba(222, 226, 230, 0.5);
	--bs-tertiary-color-rgb: 222, 226, 230;
	--bs-tertiary-bg: #2b3035;
	--bs-tertiary-bg-rgb: 43, 48, 53;
	--bs-primary-text-emphasis: #6ea8fe;
	--bs-secondary-text-emphasis: #a7acb1;
	--bs-success-text-emphasis: #75b798;
	--bs-info-text-emphasis: #6edff6;
	--bs-warning-text-emphasis: #ffda6a;
	--bs-danger-text-emphasis: #ea868f;
	--bs-light-text-emphasis: #f8f9fa;
	--bs-dark-text-emphasis: #dee2e6;
	--bs-primary-bg-subtle: #031633;
	--bs-secondary-bg-subtle: #161719;
	--bs-success-bg-subtle: #051b11;
	--bs-info-bg-subtle: #032830;
	--bs-warning-bg-subtle: #332701;
	--bs-danger-bg-subtle: #2c0b0e;
	--bs-light-bg-subtle: #343a40;
	--bs-dark-bg-subtle: #1a1d20;
	--bs-primary-border-subtle: #084298;
	--bs-secondary-border-subtle: #41464b;
	--bs-success-border-subtle: #0f5132;
	--bs-info-border-subtle: #087990;
	--bs-warning-border-subtle: #997404;
	--bs-danger-border-subtle: #842029;
	--bs-light-border-subtle: #495057;
	--bs-dark-border-subtle: #343a40;
	--bs-heading-color: inherit;
	--bs-link-color: #6ea8fe;
	--bs-link-hover-color: #8bb9fe;
	--bs-link-color-rgb: 110, 168, 254;
	--bs-link-hover-color-rgb: 139, 185, 254;
	--bs-code-color: #e685b5;
	--bs-border-color: #495057;
	--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
	--bs-form-valid-color: #75b798;
	--bs-form-valid-border-color: #75b798;
	--bs-form-invalid-color: #ea868f;
	--bs-form-invalid-border-color: #ea868f;
	--bs-border-color-transparent:rgba(255, 255, 255, 0.0);

}
.smart-captcha {
  min-width: 100% !important;
  width: 50%;
}

.brand-carousel {
  display: flex;
  align-items: center;
  gap: 12px; /* Расстояние от стрелок до ленты */
  padding: 4px 0;
  overflow: hidden;
}

.btn-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e0e0e0; /* Светло-серая рамка */
  background-color: #fff;
  color: #333;
  cursor: pointer;
  flex-shrink: 0; /* Чтобы кнопка не сплющивалась */
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0;
}

.btn-scroll:hover {
  border-color: #b0b0b0; /* Темнее при наведении */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-scroll:active {
  transform: scale(0.95); /* Лёгкое нажатие */
}

.btn-scroll:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #e0e0e0;
}

.arrow-icon {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  display: block;
}

@media (max-width: 768px) {
  .btn-scroll {
    width: 44px;
    height: 44px;
  }
}

.brand-track {
  display: flex;
  gap: 10px;
  overflow-x: auto; /* горизонтальная прокрутка */
  scroll-snap-type: x mandatory; /* обязательное прилипание */
  scroll-behavior: smooth; /* плавная прокрутка (для JS) */
  padding-bottom: 10px; /* место под скроллбар */
  -webkit-overflow-scrolling: touch; /* плавность свайпа на iOS */
}

.brand-tag {
  min-width: fit-content;
  flex-shrink: 0; /* запрещает сжиматься */
  scroll-snap-align: start; /* точка прилипания — левый край */
  padding: 6px 12px;
  border-radius: 20px;
  background: #f5f5f5;
  color: #333;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.btn-scroll {
  background: none;
  border: 1px solid #ddd;
  color: #555;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

/* Скрыть скроллбар (опционально) */
.brand-track::-webkit-scrollbar {
  height: 6px;
}
.brand-track::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.brand-track::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.age-warning {
  background-color: #d9534f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  vertical-align: middle;
  position: absolute;
  right: 0;
}

.product-description {
}
.chip2.chip2-md
 {
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
}

.chip2
 {
    display: inline-block;
    height: 32px;
    padding: 0 12px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    transition: all 0.3s linear;
    box-shadow: none;
}
/* Скрываем чекбокс */
.toggle-checkbox {
  display: none;
}

/* Кнопка-label */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: #007bff; /* цвет как у ссылки/кнопки Bootstrap */
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.toggle-btn:hover {
  text-decoration: underline;
}

/* Контент по умолчанию: обрезаем до 3 строк */
.desc-content {
  max-height: 72px; /* 3 строки * 24px line-height ≈ 72px */
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Когда чекбокс отмечен — раскрываем */
.toggle-checkbox:checked ~ .desc-content {
  max-height: none;
  padding-bottom: 0;
}

/* Меняем текст и иконку кнопки при раскрытии */
.toggle-checkbox:checked ~ .toggle-btn .btn-text::after {
  content: "Свернуть описание";
}

.toggle-checkbox:checked ~ .toggle-btn .btn-icon::after {
  content: "▲";
}

/* Хак, чтобы заменить текст кнопки через псевдоэлемент */
.toggle-btn .btn-text::after {
  content: "Развернуть описание";
}

.toggle-btn .btn-icon::after {
  content: "▼";
}


.custom-pagination .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
}

.custom-pagination .pagination li {
  display: inline-block;
}

.custom-pagination .pagination a {
  display: block;
  padding: 8px 14px;
  background-color: #ffffff;
  color: #4b5563;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.custom-pagination .pagination a:hover {
  border-color: #94a3b8;
  background-color: #f8fafc;
}

.custom-pagination .pagination .active a {
  background-color: #1e40af;
  color: #ffffff;
  border-color: #1e40af;
}

.custom-pagination .pagination .active a:hover {
  background-color: #1d388a;
  border-color: #1d388a;
}

#category, #producer, #barcodes, #about, #prices {
  scroll-margin-top: 180px;    
}

.card-timestamp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: system-ui, -apple-system, sans-serif;
}
.day-month {
    font-weight: 700;
    color: #555;
}
.year {
    color: #888;
    font-size: 0.85rem;
}
.time {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    color: #333;
    font-variant-numeric: tabular-nums; 
}
.price-obscured {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.blur-text {
    color: #888;
    filter: blur(1.5px);
    font-weight: 600;
}
.custom-search-wrapper {
    display: flex;
    flex-direction: column; /* Элементы друг под другом */
    width: 100%;
}

.search-row {
    display: flex;
    gap: 8px; /* Расстояние между инпутом и кнопкой */
    margin-bottom: 4px;
}

.search-results-inline {
    margin-top: 4px;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: none; /* Скрыт по умолчанию */
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.search-item-inline {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.search-item-inline:last-child {
    border-bottom: none;
}

.search-item-inline:hover {
    background-color: #f5faff;
    color: #0056b3;
}


/* Убираем стандартный синий outline у всех input внутри таблицы DataTables */
table.dataTable tbody td input.form-control {
    outline: none !important;
    box-shadow: none !important; /* На случай, если Bootstrap добавляет тень */
    border-color: #ced4da !important; /* Возвращаем нормальный серый цвет границы */
}

/* Убираем стандартный синий outline у всех input внутри таблицы DataTables */
table.dataTable tbody td button.form-control {
    outline: none !important;
    box-shadow: none !important; /* На случай, если Bootstrap добавляет тень */
    border-color: #ced4da !important; /* Возвращаем нормальный серый цвет границы */
}

/* Опционально: стиль при фокусе (чтобы было видно, что поле активно, но без синей рамки) */
table.dataTable tbody td input.form-control:focus {
}

table.dataTable tbody td button.btn,
table.dataTable tbody td .btn-primary {
    outline: none !important;
    box-shadow: none !important; /* убирает синюю тень, если есть */
}

table.dataTable tbody td button.btn:focus,
table.dataTable tbody td .btn-primary:focus {
    outline: none !important;
    box-shadow: none !important;
}
.search-item-inline.create-link {
    color: #777;           /* синий цвет ссылки */
    font-weight: 600;         /* жирный текст */
    text-decoration: underline;
    cursor: pointer;
    padding: 8px 10px;
    background: #fff;      /* лёгкий фон, чтобы сразу бросалось в глаза */
}

.search-item-inline.create-link:hover {
    color: #0056b3;
}

.dt-btn-wrapper {
    display: flex;
    height: 100%;
    padding: 2px 4px;
}

.btn-unlink {
    background-color: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-unlink:hover {
    background-color: #ffe6e6;
    color: #b02a37;
    border-color: #b02a37;
}

.btn-unlink:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #dc3545;
}


.row-cols-lg-6>*
{
	margin-right: 1px;
}
a {
	font-weight: 400;
}
body {
      font-family: "Montserrat", sans-serif !important;
	  font-optical-sizing: auto;
	  font-weight: 400;
	  font-style: normal;
}

.pagination {
  justify-content: center;
  gap: 0.5rem;            
}

.pagination li {
  list-style: none;
}

.pagination .page-link {
  color: #0d6efd;          
  padding: 0.375rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;   
  transition: all 0.2s;
}

.pagination .page-link:hover {
  background-color: #f8f9fa;
  color: #0d6efd;
  border-color: #adb5bd;
}

.pagination .active .page-link {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

.pagination .disabled .page-link {
  color: #6c757d;
  cursor: not-allowed;
  background-color: transparent;
  border-color: #dee2e6;
}
.pt-5 {
    padding-top: 2rem !important;
}
.input-group-lg>.btn, .input-group-lg>.form-control, .input-group-lg>.form-select, .input-group-lg>.input-group-text {
    font-size: 1rem !important;
}
.vam{
	vertical-align:middle;	
	height:60px;	
	margin-top: -20px;
}

h1{
	text-align: center !important;
	font-size: 28px !important;
	line-height: 28px !important;
	vertical-align:middle !important;	
	display: block;
    margin-block-start: 0;
    margin-block-end: 0;
}
.page-footer{
height: 30px !important;
font-size: 14px !important;
}
.dropdown-item:focus, .dropdown-item:hover {
	color: var(--bs-dropdown-link-hover-color);
	background-color: var(--bs-dropdown-link-hover-bg)
}
.context-menu {
  position: fixed;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  padding: 4px 0;
  min-width: 160px;
  z-index: 9999;
  border-radius: 4px;
}
.context-menu.hidden { display: none; }
.context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  color: #333;
}
.context-menu-item:hover { background: #f0f0f0; }

/* background colors */
.bg-success-prew {
	background: rgb(252, 24, 90, 1);
}

.bg-danger {
	background: linear-gradient(
					to bottom,
					rgb(252, 24, 90, 0.7) 50%,
					rgb(252, 24, 90, 0.9)
				  ) !important;
	border: 1px solid rgb(252, 24, 90, 1) !important;
}

.bg-nomenclature {
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(33,56,80,0.85), transparent);
}
.category-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.nav-link.active{
	    background-color: #fff !important;
		border-top: 1px solid #dee2e6 !important;
		border-left: 1px solid #dee2e6 !important;
		border-right: 1px solid #dee2e6 !important;
		color: #4f9668 !important;
}
.nav-link{
		background: linear-gradient(135deg, rgb(235, 235, 235, 0.7) , rgb(235, 235, 235, 0.9));
		border: 1px solid rgb(235, 235, 235) !important;
}

.bg-count{
	background: linear-gradient(135deg, rgb(235, 235, 235, 0.7) , rgb(235, 235, 235, 0.9));
	border: 1px solid rgb(227, 227, 227) !important;
	align-items: center;
    justify-content: center;
    color: #494949;
    width: 45px;
    height: 45px;
    border-radius: 20%;
    transition: all 0.3s;
	padding: 3px 10px;
}

.bg-count-white{
	background: linear-gradient(135deg, rgb(255, 255, 255, 0.7) , rgb(255, 255, 255, 0.9));
	border: 1px solid rgb(222, 222, 222) !important;
	align-items: center;
    justify-content: center;
    color: #494949;
    width: 45px;
    height: 45px;
    border-radius: 20%;
    transition: all 0.3s;
	padding: 3px 10px;
}


.text-nav-breadcrumb
{
  font-size: 24px;
  opacity: 0.6;
  font-weight: 700;
   background: linear-gradient(to right, rgba(47, 147, 206, 1) 40%, rgba(100, 192, 115, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;	
  vertical-align:middle;
}

.text-nav-home{
  font-size: 36px;
  opacity: 0.8;
  font-weight: 700;
   background: linear-gradient(135deg, rgba(204, 204, 204, 0.7) , rgba(110, 110, 110, 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-nav-h, .text-nav-home:hover{
  font-size: 36px;
  opacity: 1;
  font-weight: 700;
   background: linear-gradient(to right, rgba(47, 147, 206, 1) 50%, rgba(100, 192, 115, 1) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-nav-nom{
  font-size: 36px;
  opacity: 0.6;
  font-weight: 700;
  background: linear-gradient(135deg, #ffea00 , #e700eb );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-nav-brand{
  font-size: 36px;
  opacity: 0.6;
  font-weight: 700;
  background: linear-gradient(135deg, #ffea00 , #e700eb );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.text-nav-ghost{
  font-size: 36px;
  opacity: 0.6;
  font-weight: 700;
  background: linear-gradient(135deg, #ffea00 , #e700eb );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-warning {
	background: linear-gradient(
					to bottom,
					rgb(255, 193, 7, 0.7) 50%,
					rgb(255, 193, 7, 0.9)
				  ) !important;
	border: 1px solid rgb(255, 193, 7, 1) !important;
}
.bg-default{
	display: flex;
	margin-top:124px;
	margin-left:-16px;
	margin-right:-16px;
    display: flex;
    align-items: center;       
    justify-content: center;  
    text-align: center;  
    padding: 12px 16px;
	min-height: 60px; 
	max-height: 60px; 
	font-size: 16px;
	font-weight: 600;
	color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0,0,0, 0.6);
	border-radius: 0 0 0.375rem 0.375rem;
}


.bg-success-prew {
	background: rgb(2, 194, 122, 1);
}
.bg-success {
	background: linear-gradient(
					to bottom,
					rgb(2, 194, 122, 0.7) 50%,
					rgb(2, 194, 122, 0.9)
				  ) !important;
	border: 1px solid rgb(2, 194, 122, 1) !important;
}


.bg-voilet-prew {
	background: rgb(90, 78, 186, 1);
}
.bg-voilet {
	background: linear-gradient(
					to bottom,
					rgb(90, 78, 186, 0.7) 50%,
					rgb(90, 78, 186, 0.9)
				  ) !important;
	border: 1px solid rgb(90, 78, 186, 1) !important;
}

.bg-indigo-prew {
	background: #e700eb;
}
.bg-indigo {
	background: linear-gradient(
					135deg,
					rgb(255, 234, 0, 0.7) 30%,
					rgb(231, 0, 235, 0.9)
				  ) !important;	
}

.bg-dark-prew {
	background: rgba(86, 190, 122);
}

.bg-dark-blue {
	background: linear-gradient(
					135deg,
					rgba(47, 146, 204, 0.8) 50%,
					rgba(86, 190, 122, 0.8) 50%
				  ) !important;	
}

.bg-cyne-prew {
	background: rgb(13, 202, 240, 1);
}
.bg-cyne {
	background: linear-gradient(
					to bottom,
					rgb(13, 202, 240, 0.7) 50%,
					rgb(13, 202, 240, 0.9)
				  ) !important;
	border: 1px solid rgb(13, 202, 240, 1) !important;
}

.bg-indigo {
    background-color: var(--bs-indigo);
}

.bg-purple {
	background-color: var(--bs-purple);
}


.bg-orange-prew {
	background: rgb(255, 184, 102, 1);
}
.bg-orange {
	background: linear-gradient(
					to bottom,
					rgb(255, 184, 102, 0.7) 50%,
					rgb(255, 184, 102, 0.9)
				  ) !important;
	border: 1px solid rgb(255, 184, 102, 1) !important;				  
}


.bg-orange-light-prew {
	background: rgb(253, 125, 20, 1);
}
.bg-orange-light {
	background: linear-gradient(
					to bottom,
					rgb(253, 125, 20, 0.7) 50%,
					rgb(253, 125, 20, 0.9)
				  ) !important;
	border: 1px solid rgb(253, 125, 20, 1) !important;
}
.bg-success-price {
	background: rgb(2, 194, 122, 0.2);
	width:33.3%;
}
.bg-red-price {
	background: rgb(220, 53, 69, 0.2);
	width:33.3%;
}
.bg-orange-price {
	background: rgb(253, 125, 20, 0.2);
	width:33.3%;
}

.bg-red-prew {
	background: rgb(220, 53, 69, 1);
}
.bg-red {
	background: linear-gradient(
					to bottom,
					rgb(220, 53, 69, 0.7) 50%,
					rgb(220, 53, 69, 0.9)
				  ) !important;
	border: 1px solid rgb(220, 53, 69, 1) !important;
}


.bg-pink-prew {
	background: rgb(214, 51, 132, 1);
}
.bg-pink {
	background: linear-gradient(
					to bottom,
					rgb(214, 51, 132, 0.7) 50%,
					rgb(214, 51, 132, 0.9)
				  ) !important;
	border: 1px solid rgb(214, 51, 132, 1) !important;
}


.bg-pinterest-prew {
	background: rgb(230, 0, 35, 1);
}
.bg-pinterest {
	background: linear-gradient(
					to bottom,
					rgb(230, 0, 35, 0.7) 50%,
					rgb(230, 0, 35, 0.9)
				  ) !important;
	border: 1px solid rgb(230, 0, 35, 1) !important;
}


.bg-facebook-prew {
	background: rgb(8, 102, 255, 1);
}
.bg-facebook {
	background: linear-gradient(
					to bottom,
					rgb(8, 102, 255, 0.7) 50%,
					rgb(8, 102, 255, 0.9)
				  ) !important;
	border: 1px solid rgb(8, 102, 255, 1) !important;
}

.bg-linkedin-prew {
	background: rgb(0, 114, 177, 1);
}
.bg-linkedin {
	background: linear-gradient(
					to bottom,
					rgb(0, 114, 177, 0.7) 50%,
					rgb(0, 114, 177, 0.9)
				  ) !important;
	border: 1px solid rgb(0, 114, 177, 1) !important;		
	
}

.bg-whatsapp-prew {
	background: rgb(37, 211, 102, 1);
}

.bg-whatsapp {
	background: linear-gradient(
					to bottom,
					rgb(37, 211, 102, 0.7) 50%,
					rgb(37, 211, 102, 0.9)
				  ) !important;
	border: 1px solid rgb(37, 211, 102, 1) !important;
}

.nav-tabs {
    border-bottom: 0!important;
}

.ends-0 {
    left: 0 !important;
}
.navi-button{
	    background: linear-gradient(
					to bottom,
					#FFFFFF 50%,
					#F2F2F2
				  ) !important;
		border-top: 1px solid #dee2e6 !important;
		border-left: 1px solid #dee2e6 !important;
		border-right: 1px solid #dee2e6 !important;
		border-bottom: 1px solid #dee2e6 !important;
		color: #777 !important;
		display: block;
		padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
		font-size: var(--bs-nav-link-font-size);
		font-weight: var(--bs-nav-link-font-weight);
		color: var(--bs-nav-link-color);
		text-decoration: none;
		background: 0 0;
		border: 0;
		border-radius: 5px;
		margin:3px;
		transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.edit-button{
	    background: linear-gradient(
					to bottom,
					#f5f5f5 50%,
					#ededed
				  ) !important;
		border-top: 1px solid #dcdcdc !important;
		border-left: 1px solid #dcdcdc !important;
		border-right: 1px solid #dcdcdc !important;
		border-bottom: 1px solid #dcdcdc !important;
		color: #4f9668 !important;
		display: inline-block;
		padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
		font-size: var(--bs-nav-link-font-size);
		font-weight: var(--bs-nav-link-font-weight);
		color: var(--bs-nav-link-color);
		text-decoration: none;
		background: 0 0;
		border: 0;
		border-radius: 5px;
		font-weight:24px;
		margin:3px;
		vertical-align:middle;
		transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.text-lnk {
    color: #6e6e6e ;
    font-weight: 500;
	display: block;
}
.text-l {
    color: #6e6e6e ;
    font-weight: 500;
	border-bottom: 1px dashed #6e6e6e;
}
.text-lnk.selected {
}
table.dataTable tbody th, table.dataTable tbody td{
	padding: 8px 4px !important;
	vertical-align: miidle;
}
.dataTables_filter {
  text-align: right;
  margin-top: 0;
  margin-bottom: 1rem;
}

.dataTables_filter label {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #444;
  font-weight: 500;
  width: 100%;
}


.dataTables_filter input[type="search"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
  width: 100%;
  outline: none;
}

.dataTables_filter input[type="search"]:focus {
  border-color: #f2f2f2;
  box-shadow: 0 0 0 3px rgba(242, 242, 242, 0.2);
}

table.dataTable thead th, table.dataTable thead td{
  border-bottom: 1px solid #e2e3e5 !important;
  color: #333;

}
table.dataTable tfoot th, table.dataTable tfoot td{
  border-top: none !important;
  color: #333;
}

.sorting th,.sorting td{
  border-bottom: 1px solid #e2e3e5 !important;
  color: #333;
}


table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
		border-top: 1px solid #dee2e6 !important;
		border-bottom: 1px solid #dee2e6 !important;
		color: #777 !important;
		
}

table.dataTable thead .sorting {
	    background: linear-gradient(
					to bottom,
					#FFFFFF 50%,
					#F2F2F2
				  ) !important;
}

table.dataTable thead .sorting_asc {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(119, 119, 119)" class="bi bi-sort-alpha-down"><path fill-rule="evenodd" d="M10.082 5.629 9.664 7H8.598l1.789-5.332h1.234L13.402 7h-1.12l-.419-1.371h-1.781zm1.57-.785L11 2.687h-.047l-.652 2.157h1.351z"/><path d="M12.96 14H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V14zM4.5 2.5a.5.5 0 0 0-1 0v9.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L4.5 12.293V2.5z"/></svg>') !important;
background-position: center right 20px !important;

}

table.dataTable thead .sorting_desc {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(119, 119, 119)" class="bi bi-sort-alpha-up-alt"><path d="M12.96 7H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V7z"/><path fill-rule="evenodd" d="M10.082 12.629 9.664 14H8.598l1.789-5.332h1.234L13.402 14h-1.12l-.419-1.371h-1.781zm1.57-.785L11 9.688h-.047l-.652 2.156h1.351z"/><path d="M4.5 13.5a.5.5 0 0 1-1 0V3.707L2.354 4.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L4.5 3.707V13.5z"/></svg>') !important;
background-position: center right 20px !important;
}
/* components */

.card {
	margin-bottom: 1.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
	border: 0;
}

.odd {
	--bs-table-striped-bg: #FCFCFC;
}


.card-header {
	background-color: transparent;
}
.alert{
	padding:5px;
}

.dataTables_length{
	display: none;
}

.dataTables_filter{
	display: block;
	width: 100%;
}

.alert-dismissible .btn-close{
	padding: 0.5rem;
}
.btn {
	-webkit-tap-highlight-color: transparent;
     transform: translateY(0);
	--bs-btn-font-weight: 500;
	font-size: 12px;
	margin: 1px -1px;
	--bs-btn-padding-x: 6px;
    --bs-btn-padding-y: 10px;
}
.nav-tabs .nav-link{
	border: 1px solid #ebebeb;
}
.btn-danger {
	--bs-btn-color: #ba3131;
	--bs-btn-bg: #ffdbe6;
	--bs-btn-border-color: #e8a8ba;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #ef0e4e;
	--bs-btn-hover-border-color: #ef0e4e;
	--bs-btn-focus-shadow-rgb: 225, 83, 97;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #ef0e4e;
	--bs-btn-active-border-color: #ef0e4e;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #fc185a;
	--bs-btn-disabled-border-color: #fc185a
}

.btn-secondary {
	--bs-btn-color: #5b6166;
	--bs-btn-bg: #fbfbfb;
	--bs-btn-border-color: #d6d6d6;
	--bs-btn-hover-color: #5fae60;
	--bs-btn-hover-bg: #d6ffc9;
	--bs-btn-hover-border-color: #cfffcf;
	--bs-btn-focus-shadow-rgb: 225, 83, 97;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #ef0e4e;
	--bs-btn-active-border-color: #ef0e4e;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #fc185a;
	--bs-btn-disabled-border-color: #fc185a
}

.btn-inverse-danger {
    --bs-btn-color: #fc185a;
    --bs-btn-bg: rgb(252 24 90 / 10%);
    --bs-btn-border-color: rgb(252 24 90 / 0%);
    --bs-btn-hover-color: #fc185a;
    --bs-btn-hover-bg: rgb(252 24 90 / 20%);
    --bs-btn-hover-border-color: rgb(239 14 78 / 0%);
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fc185a;
    --bs-btn-active-bg: rgb(252 24 90 / 20%);
    --bs-btn-active-border-color: rgb(252 24 90 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #fc185a;
    --bs-btn-disabled-border-color: #fc185a;
}

.btn-outline-danger {
	--bs-btn-color: #fc185a;
	--bs-btn-border-color: #fc185a;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #fc185a;
	--bs-btn-hover-border-color: #fc185a;
	--bs-btn-focus-shadow-rgb: 220, 53, 69;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #fc185a;
	--bs-btn-active-border-color: #fc185a;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fc185a;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #fc185a;
	--bs-gradient: none
}

.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: #02c27a;
	--bs-btn-border-color: #02c27a;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #04a96c;
	--bs-btn-hover-border-color: #04a96c;
	--bs-btn-focus-shadow-rgb: 60, 153, 110;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #04a96c;
	--bs-btn-active-border-color: #04a96c;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #02c27a;
	--bs-btn-disabled-border-color: #198754
}

.btn-light {
	--bs-btn-color: #388b4f;
	--bs-btn-bg: #c4f5ca;
	--bs-btn-border-color: #8de085;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #509f6c;
	--bs-btn-hover-border-color: #4f9668;
	--bs-btn-focus-shadow-rgb: 118, 165, 208;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #509f6c;
	--bs-btn-active-border-color: #4f9668;
	--bs-btn-active-shadow: inset 0 3px 5px #82f7a0;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #509f6c;
	--bs-btn-disabled-border-color: #4f9668
}

.btn-inverse-success {
    --bs-btn-color: #02c27a;
    --bs-btn-bg: rgb(2 194 122 / 10%);
    --bs-btn-border-color: rgb(2 194 122 / 0%);
    --bs-btn-hover-color: #02c27a;
    --bs-btn-hover-bg: rgb(2 194 122 / 20%);
    --bs-btn-hover-border-color: rgb(2 194 122 / 0%);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #02c27a;
    --bs-btn-active-bg: rgb(2 194 122 / 20%);
    --bs-btn-active-border-color: rgb(2 194 122 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #02c27a;
    --bs-btn-disabled-border-color: #198754;
}

.btn-outline-success {
	--bs-btn-color: #02c27a;
	--bs-btn-border-color: #02c27a;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #02c27a;
	--bs-btn-hover-border-color: #02c27a;
	--bs-btn-focus-shadow-rgb: 25, 135, 84;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #02c27a;
	--bs-btn-active-border-color: #02c27a;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #02c27a;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #02c27a;
	--bs-gradient: none
}

.btn-inverse-primary {
    --bs-btn-color: #0d6efd;
    --bs-btn-bg: rgb(13 110 253 / 10%);
    --bs-btn-border-color: rgb(13 110 253 / 0%);
    --bs-btn-hover-color: #0d6efd;
    --bs-btn-hover-bg: rgb(13 110 253 / 20%);
    --bs-btn-hover-border-color: rgb(13 110 253 / 0%);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #0d6efd;
    --bs-btn-active-bg: rgb(13 110 253 / 20%);
    --bs-btn-active-border-color: rgb(13 110 253 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

.btn-inverse-info {
    --bs-btn-color: #0dcaf0;
    --bs-btn-bg: rgb(13 202 240 / 10%);
    --bs-btn-border-color: rgb(13 202 240 / 0%);
    --bs-btn-hover-color: #0dcaf0;
    --bs-btn-hover-bg: rgb(13 202 240 / 20%);
    --bs-btn-hover-border-color: rgb(13 202 240 / 0%);
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #0dcaf0;
    --bs-btn-active-bg: rgb(13 202 240 / 20%);
    --bs-btn-active-border-color: rgb(13 202 240 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0dcaf0;
    --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-inverse-warning {
    --bs-btn-color: #ffc107;
    --bs-btn-bg: rgb(255 193 7 / 10%);
    --bs-btn-border-color: rgb(255 193 7 / 0%);
    --bs-btn-hover-color: #ffc107;
    --bs-btn-hover-bg: rgb(255 193 7 / 20%);
    --bs-btn-hover-border-color: rgb(255 193 7 / 0%);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #ffc107;
    --bs-btn-active-bg: rgb(255 193 7 / 20%);
    --bs-btn-active-border-color: rgb(255 193 7 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffc107;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-inverse-dark {
    --bs-btn-color: #212529;
    --bs-btn-bg: rgb(33 37 41 / 10%);
    --bs-btn-border-color: rgb(33 37 41 / 0%);
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: rgb(33 37 41 / 20%);
    --bs-btn-hover-border-color: rgb(33 37 41 / 0%);
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: rgb(33 37 41 / 20%);
    --bs-btn-active-border-color: rgb(33 37 41 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: #212529;
    --bs-btn-disabled-border-color: #212529;
}

.btn-inverse-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-bg: rgb(108 117 125 / 10%);
    --bs-btn-border-color: rgb(108 117 125 / 0%);
    --bs-btn-hover-color: #6c757d;
    --bs-btn-hover-bg: rgb(108 117 125 / 20%);
    --bs-btn-hover-border-color: rgb(108 117 125 / 0%);
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #6c757d;
    --bs-btn-active-bg: rgb(108 117 125 / 20%);
    --bs-btn-active-border-color: rgb(108 117 125 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}


.btn-filter,
.btn-filter:hover,
.btn-filter:focus {
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color)
}


.nav-danger.nav-tabs .nav-link.active {

	color: #f41127;

	border-color: #f41127 #f41127 var(--bs-border-color-transparent)

}


.nav-success.nav-tabs .nav-link.active {

	color: #17a00e;

	border-color: #17a00e #17a00e var(--bs-border-color-transparent)

}



.nav-warning.nav-tabs .nav-link.active {

	color: #ffc107;

	border-color: #ffc107 #ffc107 var(--bs-border-color-transparent)

}



.nav-pills-danger.nav-pills .nav-link.active {

	color: #fff;

	background-color: var(--bs-danger)

}



.nav-pills-success.nav-pills .nav-link.active {

	color: #fff;

	background-color: var(--bs-success)

}



.nav-pills-warning.nav-pills .nav-link.active {
	color: #000;
	background-color: var(--bs-warning)
}

.nav-tabs .nav-link {
    color: var(--bs-body-color);
}

.nav-pills .nav-link {
    color: var(--bs-body-color);
}


/* checkboxes */

.form-check-success .form-check-input:checked {
	background-color: #15ca20;
	border-color: #15ca20
}

.form-check-success .form-check-input[type=checkbox]:indeterminate {
	background-color: #15ca20;
	border-color: #15ca20;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-success .form-check-input:focus {
	border-color: #15ca20;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(21, 202, 33, 0.25)
}



.form-check-danger .form-check-input:checked {
	background-color: #fd3550;
	border-color: #fd3550
}

.form-check-danger .form-check-input[type=checkbox]:indeterminate {
	background-color: #fd3550;
	border-color: #fd3550;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-danger .form-check-input:focus {
	border-color: #fd3550;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(253, 53, 80, 0.25)
}



.form-check-warning .form-check-input:checked {
	background-color: #ffc107;
	border-color: #ffc107
}

.form-check-warning .form-check-input[type=checkbox]:indeterminate {
	background-color: #ffc107;
	border-color: #ffc107;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-warning .form-check-input:focus {
	border-color: #ffc107;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(255, 193, 7, 0.25)
}



.form-check-dark .form-check-input:checked {
	background-color: #212529;
	border-color: #212529
}

.form-check-dark .form-check-input[type=checkbox]:indeterminate {
	background-color: #212529;
	border-color: #212529;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-dark .form-check-input:focus {
	border-color: #212529;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(33, 37, 41, 0.25)
}




.form-check-secondary .form-check-input:checked {
	background-color: #6c757d;
	border-color: #6c757d
}

.form-check-secondary .form-check-input[type=checkbox]:indeterminate {
	background-color: #6c757d;
	border-color: #6c757d;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-secondary .form-check-input:focus {
	border-color: #6c757d;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(108, 117, 125, 0.25)
}



.form-check-info .form-check-input:checked {
	background-color: #0dcaf0;
	border-color: #0dcaf0
}

.form-check-info .form-check-input[type=checkbox]:indeterminate {
	background-color: #0dcaf0;
	border-color: #0dcaf0;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-info .form-check-input:focus {
	border-color: #0dcaf0;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(13, 202, 240, 0.25)
}

.input-icon .form-control {
    padding-left: 2.5rem;
}

.input-icon span {
    font-size: 16px;
    left: 15px;
}
/* 
.material-icons-outlined {
	line-height: inherit;
} */

.input-group-text {
	background-color: transparent;
}

.price-amount {
	font-size: 50px;
}

.table {
	--bs-table-hover-bg: #f1fef5;
}