:root 
{
      --var-main-color: #3f51b5;
      --var-main-color-hover: #303f9f;
      --var-alt-color :#0061A6;
      --var-radius: 3px;
      --var-radiusb:15px;
            --var-radiuss:5px;

}



body {
    font-size:1.5rem;
    background:#E6ECF3;
}
h1,h2,h3{
    color:var(--var-main-color);
}
nav { width: auto;}
#spotlightModal .fade:not(.show)
{
    opacity: initial;;
    background:rgba(0,0,0,0.3);
}
#menu_product
{
    display:nonez;
    z-index:100;;
}
header.top
{
    z-index:2;
}
body {
    padding-left:225px;
}
body.navbarncolapsed {
    padding-left:60px;
}
.main_container {
   margin-top:0px;
}

.mobile-bottom-nav
{
    display: none;
}
.d-none {
    display:none;
}
.d-none.d-md-block {
    display:block;
}
.border-0 {
    border:0;
}
.m_pastille
{
    width:100%;
    height:auto;

}
.m_pt  ,.m_pt.solde
{
    border-radius:var(--var-radius);
    padding:5px 10px;
    margin:5px;
    background:var(--var-main-color);
    display:flex;
    align-items:center;
    width:auto;
}
.m_top
{
    border-bottom:0;
}

@media (max-width: 1600px) {
    .container {
         width: auto;
    }
}
/* Cache l'élément sur les écrans de moins de 1920px de large */
@media (max-width: 1619px) {
  .z-hidden-lg {
    display: none !important;
  }
}

/* Affiche l'élément sur les écrans de 1920px de large et plus */
@media (min-width: 1620px) {
  .z-hidden-lg {
    display: initial !important;
  }
}
@media screen and (min-width: 1600px) {
    .container {
        width: 100%;
    }
}




.step-container {
    display: flex;
    justify-content: left;
    margin: 0 0 20px 0;
}

.zstep {
    display: block;
    width:50px;
    height: 6px;
    background-color: #191919;
    margin-bottom:15px;
    transition: background-color 0.3s ease;
    margin-right:8px;
    border-radius:6px;
}

.zstep.active {
    background-color: var(--var-alt-color);
}
.form-group label 
{
    font-weight:normal;
}
.modal-title
{
    font-size:24px;
}
.modal-header 
{
    border:0;
    padding:5px 20px;
}
#search_main
{
    background:transparent ;
    box-shadow: none;
}
.cart_product_main_title 
{
    background-color: var(--var-main-color);
}
h2 {
    color:var(--var-main-color);
}

.btn ,input.m_quantite
{
    border-radius:var(--var-radius);
}
.btn-xs
{
    border-radius:var(--var-radiuss);
}
.box_brr
{
    padding:0;
   
}
.box_brr .m_main.card 
{
    border:0;
    border-radius:
}
input.m_quantite, .form-control
{
    border-color:var(--var-main-color);
}

.flying-item {
    position: absolute;
    transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}
#table-panier
{
    background:white;
    border-radius:
}
#table-panier th
{
    background:var(--var-main-color);
    color:white;
}
#table-panier td
{
    border:0;
}
#table-panier td img
{
    width:50px;
}
#table-panier tr
{
    border-bottom:1px solid #ccc;
}
.cart_description_product h2, .cart_description_product h3
{
    color:var(--var-main-color);
    font-size:14px;
    margin:0;
}




.mat-card-bg {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Assurez-vous que le conteneur prend toute la hauteur disponible */
}

.mat-card-bg .mat-body {
    flex: 1; /* Permet au contenu de s'étendre et de pousser le footer vers le bas */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.card-footer-bg {
    background-color:rgba(0, 0, 0, 0.5); /* Exemple de couleur de fond */
    background-color:#F8F8FF;
    color: #0061A6; /* Exemple de couleur de texte */
    padding: 5px;
    text-align: left;
    border-radius:var(--var-radiuss);
}
.btn-primary:hover {
  background-color: var(--var-main-color-hover);
  color: #fff;
}

/* Custom CSS for Spotlight Modal */
#spotlightModal .modal-content {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #f5f5f5;
}

#spotlightModal .modal-header {
  display:none;
}

#spotlightModal .modal-title {
    font-weight: bold;
    color: #333;
}

#spotlightModal .modal-body {
    padding: 20px;
}

#searchInput {
    margin-bottom: 10px;
}

#searchResults .list-group-item {
    border: none;
    border-radius: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#searchResults {
    max-height:300px;
    overflow:auto;
}

#searchResults .list-group-item:hover {
    background-color: #e0e0e0;
}


.nav-tabs-vertical
{
    display:flex;
}
.nav-tabs-vertical .nav-tabs
{
   width:20%;
}
.nav-tabs-vertical .nav-tabs li
{
   display:block;
   float:none;
}
.nav-tabs-vertical .tab-content
{
    width:70%;
}

.img_min {
height: 75px;
border: solid 1px lightskyblue;
border-radius: 4px;
cursor: pointer;
margin-right:10px;
}
.image_more {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.images_supplementaires_listing
{
    position:absolute;
    bottom:0;
    left:0;
    opacity:0.7
}
.images_supplementaires_listing .img_min {
    height:45px;
}
.m_img:hover .images_supplementaires_listing
{
    opacity:1;
}

@media (max-width: 768px) {
   body {
        padding-left: 60px;
    }
    .main_container {
        width: calc(100% - 60px);
        padding-left:0;
        padding-right:0;
    }
    #main 
    {
        padding:0;
    }
    .col-md-3
    {
        width:100%;
    }

}
a.list-group-item:hover, a.list-group-item:focus {
    text-decoration: none;
    background-color:var(--var-main-color-hover);
    color:white;
}
.description_produit_precis img
{
max-width: 100%;
}
.badge-info {
color: #fff;
background-color: #17a2b8;
}
.badge-warning {
color: #212529;
background-color: #ffc107;
}
.badge-danger {
color: #fff;
background-color: #dc3545;
}
#pieTotal 
{
    max-width:100%;
}