/* Custom CSS for A4 page size */
@media print {
	@page {
		size: A4;
		margin: 5mm; /* Adjust margin as needed */
	}
	body {
		margin: 0; /* Remove default body margin */
	}
}

.a4-page {
	width: 210mm; /* A4 width */
	height: 297mm; /* A4 height */
	margin: auto;
	padding: 5mm; /* Padding for content */
	border: 1px solid #ddd; /* Optional border for visibility */
	box-sizing: border-box; /* Include padding and border in element's total width and height */
}


.half-page {
    width: 203mm; /* Approximate width for Epson LX-350 (8 inches) */
    height: 140mm; /* Half of an A4 page, or adjust based on paper used */
    margin: auto;
    padding: 5mm; /* Padding for content */
    border: 1px solid #ddd; /* Optional border for visibility */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    font-size: 12px; /* Standard size for dot matrix printers */
}

.openNewPage {
	cursor: pointer;
	
}

.contentPagination {
	position: fixed;
    bottom: 0;  /* Stick to the bottom */
    left: 0;    /* Align to the left */
    width: 80%; /* Full width */
   
}

/* Button style */
.bigButton {
	width: 100%; /* Make the button span the full width of the <td> */
	height: 100%; /* Make the button span the full height of the <td> */
}


.navbarOnlineStore {

}


 /* Custom class to remove the border */
.no-border {
	border: none !important; /* Override any borders */
	box-shadow: none !important; /* Remove any shadow effects */
}

.tab-space {
	padding-left: 2em; /* Adjust the value as needed for tab-like spacing */
}

.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity .6s;
}
.tooltip-top {
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
}

tr {
	border-style:;
}


 /* Custom responsive table styling */
@media (max-width: 768px) {
	.table-responsive-custom {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.table-responsive-custom table {
		width: 100%;
		border-collapse: collapse;
	}

	.table-responsive-custom th, .table-responsive-custom td {
		display: block;
		text-align: right;
		padding: 8px;
	}

	.table-responsive-custom th::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	.table-responsive-custom td {
		position: relative;
		padding-left: 50%;
	}

	.table-responsive-custom td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		width: 50%;
		padding-left: 8px;
		font-weight: bold;
		text-transform: uppercase;
	}
}


.info-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: black;
	color: white;
	text-align: center;
	border-radius: 90%;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
}
.fontSize8px {
	font-size: 8px;
}

.fontSize10px {
	font-size: 10px;
}


.fontSize12px {
	font-size: 12px;
}

.fontSize16px{
	font-size:16px;
}

.fontSize18px{
	font-size:18px;
}

 /* This class will be added after 10 seconds */
.fade-up {
	opacity: 0;
	transform: translateY(-50px); /* Move the div up */
}

#selectProductsListTable{
	padding:0;
	width: 100%;  /* Make the table take full width */
    border-collapse: collapse; /* Ensure there’s no space between table cells */
}

.mb-8{
	margin-bottom:8px;
}

#containerPayButton {
  width: 400px;
  height: 50px;
}


#dialog {
	display : none;
}



/* Main dropdown container */
.dropdown {
	position: relative;
	display: inline-block;
}

/* First level dropdown menu */
.dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

/* Dropdown items */
.dropdown-menu a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-menu a:hover {
	background-color: #f1f1f1;
}

/* Second level submenu */
.dropdown-submenu {
	position: relative;
}

.dropdown-submenu .submenu {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.dropdown-submenu a:hover + .submenu,
.submenu:hover {
	display: block;
}

/* Hover on the main dropdown */
.dropdown:hover .dropdown-menu {
	display: block;
}



.extraInformation {
	width: 60%;
	border: none;
	border-bottom: solid 2px #c9c9c9;
}