:root {
	--background-color-body: #f8f8f8;

	--border-radius: 7px;
	--border-radius-card: 15px;
	--border-radius-btn: 20px;

	/* Header variables */
	--border-radius-search: 20px;

	/* Pagination variables */
	--border-radius-pagination: 25px;
	--background-pagination: rgba(0, 0, 0, 0.05);
	--border-radius-pagination-btn: 25px;
	--background-pagination-btn: rgba(0, 0, 0, 0);
	--color-pagination-btn: #333;
	--background-pagination-btn-hover: rgba(0, 0, 0, 0.1);
	--color-pagination-btn-hover: #333;
	--background-pagination-btn-active: #337ab7; /* 007bff */
	--color-pagination-btn-active: #fff;

	/* Famille card variables */
	--border-radius-famille-card: 15px;

	/* Article card variables */
	--background-art-card: #fff;
	--border-radius-art-card: 15px;
	--border-color-art-card: #ddd;
	--border-separator-width-art-card: 0px;

	--background-art-card-image: #fff;
	--border-radius-art-card-image: 20px;

	--background-art-card-spinner: #eee;
	--background-art-card-spinner-btn-hover: #ddd;
	--background-art-card-spinner-input: #fff;
	--border-radius-art-card-spinner: 25px;

	--border-radius-art-card-btn-add: 25px;
}

/* #region Override body background color */
body,
.breadcrumb-container,
.legende,
.edition-commande .legende,
#demandedeprixbottom {
	background-color: var(--background-color-body) !important;
}
body .position-sticky:not(th) {
	background-color: var(--background-color-body) !important;
}

.breadcrumb,
.breadcrumb *,
#collapse-demandedeprixbottom .demandedeprixbottom-list {
	-ms-scrollbar-highlight-color: var(--background-color-body);
	scrollbar-highlight-color: var(--background-color-body);
}
.breadcrumb::-webkit-scrollbar-corner,
.breadcrumb *::-webkit-scrollbar-corner,
#collapse-demandedeprixbottom .demandedeprixbottom-list::-webkit-scrollbar-corner  {
	background-color: var(--background-color-body);
}
.breadcrumb::-webkit-scrollbar-thumb,
.breadcrumb *::-webkit-scrollbar-thumb,
#collapse-demandedeprixbottom .demandedeprixbottom-list::-webkit-scrollbar-thumb {
	border: 5px solid var(--background-color-body)
}
/* #endregion Override body background color */

/* #region Button and form control border radius */
.dropdown.form-control,
.btn {
	border-radius: var(--border-radius-btn);
}
*:not(.input-group) input.form-control {
	border-radius: var(--border-radius-btn);
}
.input-group > *:first-child {
	border-top-left-radius: var(--border-radius-btn);
	border-bottom-left-radius: var(--border-radius-btn);
}
.input-group > *:last-child {
	border-top-right-radius: var(--border-radius-btn);
	border-bottom-right-radius: var(--border-radius-btn);
}
.input-group > *:nth-last-child(2):has( + .hidden:last-child),
.input-group > *:nth-last-child(2):has( + .hidden:last-child) > .btn {
	border-top-right-radius: var(--border-radius-btn) !important;
	border-bottom-right-radius: var(--border-radius-btn) !important;
}
textarea.form-control {
	border-radius: var(--border-radius-btn);
}
/* #endregion Button and form control border radius */

/* #region Nav pills styling */
.nav-pills > li > a {
	border-radius: var(--border-radius-btn);
}
/* #endregion Nav pills styling */

/* #region Dropdown styling */
/* #nav-section .solid-menus .dropdown:not(.dropdown-full-width-g) .dropdown-menu { */
.dropdown:not(.dropdown-full-width-g) .dropdown-menu {
	padding: 10px !important;
	margin: 0;
	border-radius: var(--border-radius-card);

	&.inner {
		padding: 0 !important;
	}

	> li {
		border: none;
		background-color: transparent;
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0;
		}

		> a {
			border-radius: var(--border-radius-btn);
			background-color: transparent;
			transition: background-color 150ms ease, color 150ms ease;
			color: #333;
		}
		> a:hover {
			background-color: rgba(0, 0, 0, 0.05);
			color: #333;
		}
		&.active {
			background-color: #337ab7;
			color: #fff;
		}

		/* Force colors */
		&.selected {
			background-color: transparent !important;

			> a {
				background-color: #337ab7 !important;
				color: #fff !important;

				&:hover {
					background-color: rgba(0, 0, 0, 0.05) !important;
					color: #333 !important;
				}
			}
		}
	}
}
/* #endregion Dropdown styling */

/* #region Modal styling */
.modal-content {
	border-radius: var(--border-radius-card) !important;
}
.modal-header {
	border-top-left-radius: var(--border-radius-card) !important;
	border-top-right-radius: var(--border-radius-card) !important;
}
.modal-footer {
	border-bottom-left-radius: var(--border-radius-card) !important;
	border-bottom-right-radius: var(--border-radius-card) !important;
}
/* #endregion Modal styling */

/* #region Form styling */
.form-recherche h1 {
	border-radius: var(--border-radius-card) !important;
}
/* #endregion Form styling */

/* #region Panel styling */
.panel {
	border-radius: var(--border-radius-card) !important;
}
.panel-heading {
	border-top-left-radius: var(--border-radius-card) !important;
	border-top-right-radius: var(--border-radius-card) !important;
}
.panel-footer {
	border-bottom-left-radius: var(--border-radius-card) !important;
	border-bottom-right-radius: var(--border-radius-card) !important;
}
/* #endregion Panel styling */

/* #region Jumbotron styling */
.jumbotron {
	border-radius: var(--border-radius-card) !important;
}
/* #endregion Jumbotron styling */

/* #region Well styling */
.well {
	border-radius: var(--border-radius-card) !important;
}
/* #endregion Well styling */

/* #region Alert styling */
.alert {
	border-radius: var(--border-radius-card) !important;
}
/* #endregion Alert styling */

/* #region Pagination styling */
.pagination {
	padding: 5px;
	border-radius: var(--border-radius-pagination);
	background: var(--background-pagination);
}
.pagination li a {
	border-radius: var(--border-radius-pagination-btn) !important;
	border-width: 0;
	background: var(--background-pagination-btn);
	color: var(--color-pagination-btn);
	transition: background-color 300ms ease, color 300ms ease;
	box-shadow: none !important;
}
.pagination li a:hover,
.pagination li a:focus {
	background: var(--background-pagination-btn-hover);
	color: var(--color-pagination-btn-hover);
}
.pagination li a:active,
.pagination li.active a {
	background: var(--background-pagination-btn-active);
	color: var(--color-pagination-btn-active);
}
/* #endregion Pagination styling */

/* #region Number spinner styling */
.page-offre,
.page-campagne-promo,
#catalogue-articles,
.page-fiche-article,
.page-articles-les-plus-commandes,
.page-selections,
.page-statistiques-consommation,
.edition-commande .section-articles:has( .Articles_Modifier_Popup),
.edition-commande .bootstrap-dialog:has(  .modal-body .number-spinner) {
	.input-group-minimize .number-spinner {
		display: inline-flex;
	}
	
	tr[id^="article-"] .number-spinner,
	article .number-spinner,
	.article-commande .number-spinner,
	.article[id^="article-lot_"] .number-spinner,
	#form_valid .number-spinner,
	.Articles_Modifier_Popup .number-spinner,
	.modal-body .number-spinner {
		border-radius: var(--border-radius-art-card-spinner);
		background: var(--background-art-card-spinner);

		.btn:not(.btn-commander):not(.btn-voir-art-declinaisons),
		.input-group-addon {
			border: none;
			background: var(--background-art-card-spinner);
			transition: background-color 300ms ease;
		}

		.btn:not(.btn-commander):not(.btn-voir-art-declinaisons):hover,
		.btn:not(.btn-commander):not(.btn-voir-art-declinaisons):focus {
			background: var(--background-art-card-spinner-btn-hover);
		}
		
		input.form-control {
			margin: 3px 0 !important;
			background: var(--background-art-card-spinner-input);
			height: 29px;
			padding: 2px 5px;
		}
		input:not(:focus) {
			border: none;
		}
		
		.input-group-addon,
		.btn,
		input {
			border-radius: var(--border-radius-art-card-spinner);
		}

		.number-spinner-moins,
		.number-spinner-plus {
			position: relative;
			height: 35px;
			width: 35px;
			background: transparent !important;
			z-index: 0;
		}
		.number-spinner-moins:before,
		.number-spinner-plus:before {
			content: "";
			position: absolute;
			inset: 2px;
			border-radius: var(--border-radius-btn);
			transition: background-color 300ms ease;
			z-index: -1;
		}
		.number-spinner-moins:hover:before,
		.number-spinner-moins:focus:before,
		.number-spinner-plus:hover:before ,
		.number-spinner-plus:focus:before {
			background: var(--background-art-card-spinner-btn-hover);
		}
	}
}

.page-offre tr[id^="article-"] > td > .number-spinner {
	width: 100% !important;

	> .dropdown.bootstrap-select {
		width: 100%;

		> button.dropdown-toggle > .filter-option {
			text-align: center;
		}
	}
}
/* #endregion Number spinner styling */

/* #region Header styling */
@media (min-width: 768px) {
	/* Force navbar to be flex and allow horizontal scrolling on smaller screens */
	/*
	#nav-section-navbar {
		#navbar {
			display: flex !important;
		}

		.navbar-nav.hidden-xs {
			display: flex;
			overflow: auto;
			flex-wrap: nowrap;
			float: none;

			&:not(.navbar-right) {
				flex: 1;
			}

			> li {
				float: none;
				white-space: nowrap;

				&:has( .navbar-brand-logo) {
					position: sticky;
					left: 0;
					z-index: 1;
				}
			}
		}
	}
	*/

	.navbar-nav {
		> li {
			&.header-search #search_term {
				width: 100px !important;
				transition: width 300ms ease;
			}
			&.header-search:focus-within #search_term {
				width: 250px !important;
			}

			> a:not(.navbar-brand-logo) {
				&,
				&:hover {
					/*background-color: transparent !important;*/
					z-index: 0;
					transition: color 300ms ease;
				}
				#nav-section-navbar &,
				#nav-section-navbar &:hover,
				#nav-section-navbar-minibar &,
				#nav-section-navbar-minibar &:hover {
					background-color: transparent !important;
				}

				&:before {
					content: "";
					position: absolute;
					inset: 8px 5px;
					border-radius: var(--border-radius-btn);
					background-color: transparent;
					transition: background-color 300ms ease;
					z-index: -1;
				}
				.navbar-minibar &:before {
					inset: 3px 5px;
				}

				#nav-section-navbar & {
					color: var(--couleur-navbar-color) !important;
					&:hover {
						color: var(--couleur-navbar-color-hover) !important;
						&:before {
							background-color: var(--couleur-navbar-background-color-hover) !important;
						}
					}
				}
				#nav-section-navbar-minibar & {
					color: var(--couleur-navbar-minibar-color) !important;
					&:hover {
						color: var(--couleur-navbar-minibar-color-hover) !important;
						&:before {
							background-color: var(--couleur-navbar-minibar-background-color-hover) !important;
						}
					}
				}
			}

			#nav-section-navbar &.open > a:not(.navbar-brand-logo) {
				color: var(--couleur-navbar-color-hover) !important;
				&:before {
					background-color: var(--couleur-navbar-background-color-hover);
				}
			}
			#nav-section-navbar-minibar &.open > a:not(.navbar-brand-logo) {
				color: var(--couleur-navbar-minibar-color-hover) !important;
				&:before {
					background-color: var(--couleur-navbar-minibar-background-color-hover);
				}
			}

			#nav-section-navbar & .navbar-brand-logo {
				background-color: var(--couleur-navbar-background-color);

				&:hover {
					background-color: var(--couleur-navbar-background-color-hover);
				}
			}
			#nav-section-navbar-minibar & .navbar-brand-logo {
				background-color: var(--couleur-navbar-minibar-background-color);

				&:hover {
					background-color: var(--couleur-navbar-minibar-background-color-hover);
				}
			}
		}
	}
}

#nav-section .navbarAvancementBudget .progress {
	border-radius: var(--border-radius-btn);
}
.header-search {
	.search_small_form {
		z-index: 1;
	}
	input,
	.twitter-typeahead .tt-input,
	&.search_small_mobile_form .search_small_submit {
		border-top-left-radius: var(--border-radius-search) !important;
		border-bottom-left-radius: var(--border-radius-search) !important;
	}
}

#nav-section-navbar .navbar-nav.hidden-xs {
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-ms-scrollbar-highlight-color: #f0f0f0;
	scrollbar-highlight-color: #f0f0f0;
	-ms-scrollbar-face-color: #aaa;
	scrollbar-face-color: #aaa;
	-ms-scrollbar-arrow-color: #aaa;
	scrollbar-arrow-color: #aaa;
	scrollbar-base-color: #000;
	scrollbar-width: thin;
	scrollbar-color: #aaa transparent;

	&::-webkit-scrollbar {width:17px;}
	&::-webkit-scrollbar-corner  {background-color:#f0f0f0;}
	&::-webkit-scrollbar-thumb {background:#aaa;border-radius:10px;border:5px solid #f0f0f0}
}
/* #endregion Header styling */

/* #region Header Mega menu styling */
@media (min-width: 768px) {
	#nav-section .solid-menus .dropdown {
		&.dropdown-full-width-g > .dropdown-menu {
			padding: 0;
			margin: 0;

			&::before, &::after {
				display: none;
			}

			.side-tabs {
				display: flex;
				padding: 20px;
				margin: 0;
				gap: 20px;
				
				&::before, &::after {
					display: none;
				}

				> .tab-nav {
					float: none;
					display: flex;
					flex-direction: column;
					gap: 5px;
					padding: 10px !important;
					margin: 0 !important;
					border-right: none;
					border-radius: var(--border-radius-card);
					background-color: var(--background-color-body);
					/* background-color: #ebb250; */
					white-space: normal;
					overflow: auto;
					max-height: calc(100vh - 200px);
					max-width: 50%;
					
					&::before, &::after {
						display: none;
					}

					li {
						border: none;
						background-color: transparent;

						a {
							border-radius: var(--border-radius-btn);
							background-color: transparent;
							transition: background-color 150ms ease, color 150ms ease;
						}

						a:hover {
							background-color: rgba(0, 0, 0, 0.05);
						}

						&.ui-tabs-active {
							border: none;

							a {
								background-color: #ffffff;
								background-color: #337ab7;
								color: #fff;
							}
						}
					}
				}

				> .tab-container {
					float: none;
					display: flex;
					flex: 1;
					padding: 0 !important;
					margin: 0;
					overflow: auto;
					max-height: calc(100vh - 200px);
					white-space: normal;

					> .s-tab-content {
						padding: 0 15px;
						width: 100%;

						> .row {
							> .pad-2 {
								padding: 0 15px;
							}
						}
					}

					/* > .s-tab-content.l-block {
						display: flex;
						
						&::before, &::after {
							display: none;
						}

						> .s-tab-content {
							display: flex;

							&::before, &::after {
								display: none;
							}
						}
					} */
				}
			}
		}
	}
}

/* #endregion Header Mega menu styling */

/* #region Dashboard styling */
.dashboard-sidenav > a:before {
	inset: 8px !important;
	border-radius: var(--border-radius-card) !important;
}
.dashboard-sidenav > a.-is-active {
	box-shadow: none !important;
}
.dashboard-sidenav > a.-is-active:before {
	box-shadow: 0 0px 7px 2px rgba(10, 106, 172, 0.15)
}
.dashboard-card {
	border-radius: var(--border-radius-card) !important;
}
/* #endregion Dashboard styling */

/* #region Famille cards styling */
.catalog-fa-box {
	border-radius: var(--border-radius-famille-card);
	border-bottom-width: var(--border-radius-famille-card);

	&.no-border:before,
	&.no-border > div {
		border-radius: var(--border-radius-famille-card);
	}
}
/* #endregion Famille cards styling */

/* #region Article cards styling */
.page-selections .catalogue-grille > .row,
.page-offre .catalogue-grille > .row,
.page-campagne-promo .catalogue-grille > .row,
#catalogue-articles.catalogue-grille > .row {
	display: grid;
	padding: 0;
	margin: 0;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 20px;
	
	/* Remove default Bootstrap column padding */
	&::before, &::after {
		display: none;
	}
	
	> div {
		/* Remove default row spacing and allow full width for rows with title and separator */
		&.clearfix {
			display: none !important;
		}

		&:has(> article),
		&:has(> .article) {
			display: flex;
			margin: 0;
			padding: 0;
			width: unset;
		}

		/* Allow full width for rows with title and separator */
		&:has(> h1, > h2, > h3, > h4, > h5, > h6) {
			grid-column: 1 / -1;
		}
		&:has(> h1:empty,> h2:empty,> h3:empty,> h4:empty,> h5:empty,> h6:empty) {
			display: none;
		}

		> article,
		> .article {
			display: flex;
			flex-direction: column;
			margin: 0;
			padding: 0;
			width: 100%;
			min-height: auto !important;
			border-radius: var(--border-radius-art-card) !important;
			border: 1px solid var(--border-color-art-card);
			background: var(--background-art-card) !important;
			
			&.clearfix::before, &.clearfix::after {
				display: none;
			}

			.article-info {
				position: relative;
			}
			.article-info::after {
				content: "";
				display: inline-block;
				margin-top: 3px;
				padding: 1px 6px;
				border-radius: 50px;
				font-size: 0.95em;
			}
			&.mercu-enseigne .article-info:after {
				content: "Article du marché";
				background-color: var(--mercu-enseigne-background-color, #72f781);
				color: var(--mercu-enseigne-color, #000000);
			}


			.article-image {
				height: 150px;
    			line-height: 150px;
				padding: 15px;
				border-top-left-radius: var(--border-radius-art-card);
				border-top-right-radius: var(--border-radius-art-card);
				border-bottom: var(--border-separator-width-art-card) solid var(--border-color-art-card);
				background: var(--background-art-card-image);


				> a > img,
				.owl-item > a > img,
				figure {
					border-radius: var(--border-radius-art-card-image);
					max-height: 100%;
					max-width: 100%;
					margin-left: auto;
					margin-right: auto;
					object-fit: contain;
				}

				.owl-carousel .owl-item > a > img {
					max-height: 120px !important;
				}
			}

			.article-body {
				padding: 0 15px;
				margin: 0 0 10px 0;
				background: var(--background-art-card);

				.article-prix {
					text-align: center;

					.prix-actuel {
						color: #666666 !important;
					}
				}
			}
			a:has(> .article-body) {
				text-decoration: none;
			}

			.article-footer {
				position: relative;
				margin-top: auto;
				border-bottom-left-radius: var(--border-radius-art-card);
				border-bottom-right-radius: var(--border-radius-art-card);
				border-top: var(--border-separator-width-art-card) solid var(--border-color-art-card);
				background: var(--background-art-card);

				.number-spinner {
					margin: 0 10px;
				}
			}
			
			.btn-commander,
			.btn-voir-art-declinaisons {
				margin: 10px !important;
				width: calc(100% - 20px);
				border-radius: var(--border-radius-art-card-btn-add);
			}
		}
	}
}
	
#catalogue-articles.catalogue-liste-image article {
		border-radius: var(--border-radius-art-card) !important;
		border: 1px solid var(--border-color-art-card);
		background: var(--background-art-card);
}
#catalogue-articles.catalogue-liste td {
	vertical-align: middle;
}
/* #endregion Article cards styling */

/* #region Catalogue display mode toggle styling */
#mode-group.btn-group {
	border-radius: var(--border-radius-btn);
    background-color: var(--background-pagination);
	padding: 5px;

	.btn {
		margin-right: 10px;
		border-radius: var(--border-radius-pagination-btn) !important;
		border-width: 0;
		background: var(--background-pagination-btn);
		color: var(--color-pagination-btn);
		transition: background-color 300ms ease, color 300ms ease;
		box-shadow: none !important;

		&:hover,
		&:focus {
			background: var(--background-pagination-btn-hover);
			color: var(--color-pagination-btn-hover);
		}

		&.active {
			background: var(--background-pagination-btn-active);
			color: var(--color-pagination-btn-active);
		}

		&:last-child {
			margin-right: 0;
		}
	}
}
/* #endregion Catalogue display mode toggle styling */

/* #region Article details styling */
.page-fiche-article .tab-content {
	border-radius: var(--border-radius-card);
}
/* #endregion Article details styling */


#Form_Catalogue .grp_options {
	border-radius: var(--border-radius-card);
}

.edition-commande .twitter-typeahead .typeAhead.tt-input {
	border-radius: var(--border-radius-btn) !important;
}