:root {
    --codiclic_orange: #ee7117;
    --codiclic_orange_dark: #de6117;
    --codiclic_orange_clair: #ECA776;
    --codiclic_bleu: #1447e7;
    --codiclic_bleu_dark: #1036ab;
    --codiclic_vert: #00af2c;
    --codiclic_vert_dark: hsl(135, 99%, 31%);
}

/*
html.frontoffice ::-webkit-scrollbar {
    display: none;
}
*/


body {
    /*scrollbar-width: none;*/
}



@font-face {
	font-family: "Roboto-Bold";
	src: url('font/Roboto-Bold_1.ttf');
}

@font-face {
	font-family: "Roboto";
	src: url('font/RobotoCondensed-Regular_0.ttf');
}

@font-face {
	font-family: "Roboto-Light";
	src: url('font/RobotoCondensed-Light_0.ttf');
}

.hide{display: none;}


#police {
    font-family: "Roboto";
}

/*Style Header Index*/

#bandeau-top-header
{
    background:#57585a;
    color:#fffffe;
    text-align: center;
    position: relative;
}

#logo-codifrance
{
    line-height: 10px;
    width: 10px;
    float:left;
}

.simple-linear {
    /* background: linear-gradient(#f7f7f5, #f1f1ee); */
    font-family: "Roboto";
  }

  .simple-linear a {
    color:#000;
  }


#logo-codiclic
{
    width: 30px;
}


#form-recherche {
    margin-bottom: auto;
    margin-top: auto;
}

.btn-savoir-plus {
    margin-right: 12px;
}

@media(max-width: 991px) {
    #form-recherche {
        margin-top: 4px !important;
    }
    .input-group.recherche-article {
        display:flex;
        width: 50%;
        padding-right: 5px;
        padding-left: 5px;
    }
}

@media(max-width: 400px) {
    .input-group.recherche-article {
        display:flex;
        width: 80%;
        padding-right: 5px;
        padding-left: 5px;
    }
}

.input-group.recherche-article {
    display:flex;
    padding-right: 5px;
    padding-left: 5px;
}

.input-group.recherche-article > input,
.input-group.recherche-article > input.form-control {
    height: 30px;
    width: 50px;
    text-align: left;
    border-color: #000000;
    border-radius: 40px;
    font-size: 15px;
}

.input-group.recherche-article > .input-group-append {
    height: 30px;
    background-color: #ee7117;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border:1px solid;
    border-color: #000000;
    padding-left: 8px;
    padding-right: 10px;
}


/* Style barre de Navigation */
nav#navigation-header
{
    /*height: 40px;*/
    padding-top: 0px;
    padding-bottom: 0px;
    background: linear-gradient(#f1f1ee, #e8e7e3);
    color: black;
}



nav#navigation-header .navbar-toggler-icon {
    display: flex;
    align-items: center;
}


.navbar-inner:not(.navbar-bo){
    border-top: 2px solid rgb(255, 255, 255);
    list-style: none;

}

.navbar-inner:not(.navbar-bo)> .collapse:not(.show) > ul {
    height: 38px;
}

.navbar-inner:not(.navbar-bo)> .collapse > ul > li:not(.separator),
.navbar-inner:not(.navbar-bo)> .collapsing > ul > li:not(.separator) {
    font-size: 15px;
    padding-right: 8px;
    padding-left: 8px;
    height: 100%;
}

.navbar-inner:not(.navbar-bo)> .collapse > ul > li > * {
    height: 100%;
    color :black

}

.navbar-inner:not(.navbar-bo)> .collapse > ul > li a:hover,
.navbar-inner:not(.navbar-bo)> .collapse > ul > li a[data-toggle="collapse"][aria-expanded="true"] {
    border-bottom: 3px solid rgb(255, 136, 0);
}

.navbar-inner:not(.navbar-bo)> .collapse > ul > li.separator {
    margin-top: calc((38px - 20px) / 2);
    width: 1px;
    height: 20px;
    background-color: black;
}


@media(max-width: 767px) {
    .navbar-inner:not(.navbar-bo)> .collapse > ul > li.separator {
        display:none;
    }
}


#block-menu-produit
{
    background: #e8e7e3;

}

#block-menu-contact
{
    background: #e8e7e3;

}

#block-menu-emballages
{
    background: #e8e7e3;


}
#block-contact-navbar
{
    background:#ffffff;
    border:none;
    border: 1px solid rgb(255, 136, 0);
    margin-top: 2%;
    margin-bottom:  2%;
    text-align: center;
}

#titre-contact-menu
{
    font-size: 1.8em;
    font-family: "Roboto-bold"
}

#block-contact-service-client
{
    margin-bottom: 15%;
    font-size: 0.9em;
    text-align: left;
}

#block-contact-service-client span
{
    font-size: 1em;
    font-family: "Roboto-bold"

}

#block-contact-courrier
{
    margin-top: 15%;
    margin-bottom: 15%;
    font-size: 1em;

}

#block-contact-courrier span
{
    font-size: 1.2em;
    font-family: "Roboto-bold"
}

#reclamation-contact
{
    margin-top: 5%;
    margin-bottom: 5%;
}


#reclamation-contact a
{
    width:100%;
    border-radius: 50px;
    background:#ee7117;
    font-size: 15px;
    font-family: "Roboto-bold";
    color:#303030;
    border:none;
    padding:3%;
    margin-bottom: 20px;
    margin-top: 20px;
}

#reclamation-contact a:hover
{
    text-decoration: none;
    color: white;
}

#back-texte-index
{
    position:relative;
    width: 100%;
}


#back-image-index
{
    background-image: url('images/background-image-index.jpg');
    height: 350px;
    filter: brightness(35%);
    background-image: center;

}

@media screen and (max-width: 900px) {
    .texte-image {
        display: none;
    }
    .texte-image2 {
        display: none;
    }
    .texte-image3 {
        display: none;
    }
    .texte-image4 {
        display: none;
    }
  }

.image-pomona > img {
    width: 100%;
}

.chevron-classif
{
    float: right;
    margin-right: 10px;

}

.chevron-classif i:hover{
    color: var(--codiclic_orange);
}

.texte-image {
    position: absolute; /* postulat de départ */
    top: 10%; left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
    font-size: 20px;
    font-family: "Roboto-bold";
    color:#ffffff;
    text-shadow: black 0.1em 0.1em 0.2em;
    text-align: center;

}

.texte-image2 {
    position:absolute;
    top: 20%; left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
    font-size:18px;
    font-family: "Roboto-bold";
    text-shadow: black 0.1em 0.1em 0.2em;
    color: #ee7117;


}

.texte-image3 {
    position:absolute;
    top: 40%; left: 50%; /* à 50%/50% du parent référent */
    transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
    font-size: 15px;
    text-shadow: black 0.1em 0.1em 0.2em;


}


#titreSectionRayon
{
    color:#ee7117;
    font-size: 32px;
    margin-bottom: 5%;
}

nav.navbar a {
    display: inline-block;
    color: black;

}
li:after {
    margin-right: 20px;
    padding-left: 10px;

}


#index-login
{
    display: flex;
    justify-content:center;
    margin: auto;
}


#block-connexion
{
    background:#e8e7e3;
    font-family: "Roboto-bold";
    color:#ee7117;
    position:relative;
    bottom: 140px;
    text-align: center;
    box-shadow: 1px 1px 12px #555;

}

#block-form
{
    background:#303030;
    position:relative;
    bottom: 140px;
    text-align: center;
    font-family: "Roboto-bold";
    box-shadow: 1px 1px 12px #555;

}

#separateur-box
{
    border-top: 1px solid #838383;
    margin-top: 20px;
    margin-bottom: 20px;
}

#texte-numero
{
    border-radius: 50px;
    background:#ffffff;
    font-size: 15px;
    font-family: "Roboto-bold";
    color:#ee7117;
    border:none;
    padding-left: 21%;
    padding-right: 21%;
    display: inline-block;

}

#block-form button
{
    border-radius: 50px;
    background:#ee7117;
    font-size: 15px;
    font-family: "Roboto-bold";
    color:#303030;
    border:none;
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-bottom: 20px;
}

.texte-index-ref {
    margin-top: -5%;
    font-size: 20px;
    font-family: "Roboto-bold";
    color:#000000;
    width: 100%;
    text-align: center;
}

.soustexte-index-ref {
    font-size: 17px;
    color:#000000;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.soustexte-footer {
    font-size: 15px;
    color:#000000;
    display: block;
    text-align: center;
}

#menu-compte
{
    font-size: 15px;
    color:#000000;
    background: linear-gradient(#f1f1ee, #e8e7e3);
    box-shadow: 1px 1px 12px #555;
    top: 30px;

}

#icon-pdt {
    margin-right: 20px;
}

.animation-icon {
    -webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
    position: relative;
}
.animation-icon:hover {
    padding: 3px 0;
}

#cercle-pdt {
    position: absolute;
    top:-10px;
    right: -10px;
    display:flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgb(218, 13, 13);

}

#cercle-actu {
    position: absolute;
    top: 20px;
    left: 290px;
    display:flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgb(218, 13, 13);

}

#header-panier > #icon-panier {

}


#header-panier > #infos-panier {

}

@media(max-width: 1199px) {
    #header-panier {
        position: relative;
    }

    #header-panier > #infos-panier #mot-articles {
        display: none;
    }

    #header-panier > #infos-panier .money {
        display: none;
    }

    #header-panier > #infos-panier .panier-nb-lignes {
        position: absolute;
        top: -6px;
        right: -10px;

        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgb(218, 13, 13);
    }
}

#menu-mon-compte,
#menu-panier {
    font-size: 0.95rem;
    color: #000000;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}

#menu-mon-compte .btn.dropdown-toggle,
#menu-panier .panier-nb-lignes {
    padding: 0px;
    font-weight: bold;
}

#menu-panier > a {
    margin-right: 10px;
}

.header-precision {
    font-size: 0.7rem;
    color: #888;
    text-align: center;
}

#menu-panier > #icon-pdt,
#menu-panier > #header-panier {

    display:flex;
    align-items: flex-end;
}


#bouton-deconnexion
{
    margin-left: 30px;
    margin-right: 30px;
    background:#ee7117;
    border:none;
    align-content: center;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding:5px;
}
#bouton-deconnexion a
{
    text-decoration: none;
}
#bouton-deconnexion:hover
{
    background:#eb6f17c5;
}


.btn-info
{
   background-color: #ee7117 !important;
   border:none !important;
}
.btn-circle {
    width: 1.875rem;
    height: 1.875rem;
    text-align: center;
    padding: 0.375rem 0;
    font-size: 0.75rem;
    line-height: 1.428571429;
    border-radius: 0.938rem;
  }

.btn-circle.btn-lg {
    width: 2.175rem;
    height: 2.175rem;
    padding: 0.625rem 1rem;
    font-size: 1.125rem;
    line-height: 1.33;
    border-radius: 1.563rem;
}

.bouton-rond-centre {
    display: flex !important;
    justify-content: center;
    align-items: center;

}

#bloc-preco-home
{
    background: #040a5c;
    color: #ffffff;
    width: 320px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 20px;
    font-size: 12px;
    font-family: "Roboto-bold";

}
/* alerts */

.alert {
    border: 0;
    border-radius: 0;
    line-height: 20px;
    font-weight: 300;
    color: #fff;
}

.contenu-info
{
    margin-right: 5px;
}


.alert .alert-icon {
    display: block;
    float: left;
    margin-right: 1.071rem;
}

.alert b {
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
}

.close {
    float: right;
    font-size: 1.5rem;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
.alert .close {
    color: #fff;
    text-shadow: none;
    opacity: .9;
}
.alert .close i {
    font-size: 20px;
}
.alert .close:hover{
    opacity: 1;
    color: #fff;
}

.alert.alert-warning {
    background-color: #ff9e0f;
    color: #fff;
}
.alert.alert-danger {
    background-color: #f55145;
    color: #fff;
}


body {
    background-color: #fff;
}
.form-signin {
    width: 100%;
    max-width: 370px;
    padding: 15px;
    margin: auto;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.form-signin button {
    margin-top: 20px;
    width: 100%;
    height: 45px;
    border-radius: 50px;
    background:#ee7117;
    font-size: 20px;
    font-family: "Roboto-bold";
    color:#ffffff;
    border:none;
}

#pastille_saisie
{
    color: #ffffff;
    position: absolute;
    background-color: #d40000;
    padding: 7px;
    margin-top: 25px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;

}

#pastille_a_venir
{
    color: #ffffff;
    position: absolute;
    background-color: #64b32c;
    padding: 7px;
    margin-top: 25px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;

}


/* Bloc Rayon index */

#section-rayons {
    background: #e8e7e3;
}

@media(max-width: 767px) {
    #section-rayons {
        padding: 0px;
    }
}

.pictoRayon {
    margin-bottom: 2%;
}

.bouton-carousel {
    height: 60px;
    background-color: #ee7117;
    border: solid 2px #ee7117;
    margin-bottom: 40px;
    width: 200px;
    font-size: 1.5rem;
}

.bouton-carousel:first-child {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding-left: 8px;
    padding-right: 10px;
}

.bouton-carousel:not(:first-child) {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    padding-left: 8px;
    padding-right: 10px;
    margin-left: -4px;
}

.bouton-carousel:hover {
    background-color: var(--codiclic_orange_dark)
}

.bouton-carousel.active {
    background-color: #ffffff !important;
    height: 64px !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}


@media(max-width: 767px) {
    .bouton-carousel {
        height: 40px;
        width: 100px;
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    .bouton-carousel.active {
        height: 42px !important;
    }
}

.carousel.slide {
    display: none;
}

.carousel.slide.active {
    display: block;
}

.roundedImage{
    overflow:hidden;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:80px;
    width:150px;
    height:150px;

}

.roundedImageConnecte{
    overflow:hidden;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:40px;
    width:80px;
    height:80px;

}


.block-codiactus
{
    background:#e8e7e3;
    height: 300px;
    margin : 20px;
    border: solid 3px;
    border-color: var(--codiclic_orange);
}

.titre-actu-index
{
    margin-top: 5%;
    border: solid 1px;
    border-color: var(--codiclic_orange);
    font-size: 1.7em;
    color: var(--codiclic_orange);
}
.text-actu-index
{
    font-size: 1.2em;
    margin-top: 10px;
}
.text-orange-index
{
    color: var(--codiclic_orange);
}

/* Footer */


section {
    padding: 60px 0;
    margin:40px auto;
    text-align: center;
    justify-content: center;

}

@media(max-width: 767px) {
    section {
        padding: 20px 0;

    }
}

#block-footer-contact
{
    background:#f7f7f5;
    box-shadow: 1px 1px 12px #555;
    text-align: center;
    font-family: "Roboto-bold";
    padding-bottom: 1%;
    padding-top: 1%;
}

#block-footer-contact button
{
    width: 80%;
    height: 45px;
    border-radius: 50px;
    background:#ee7117;
    font-size: 15px;
    font-family: "Roboto-bold";
    color:#303030;
    border:none;
    justify-content: center;
}

#separateur-footer
{
    border-top: 0.5px solid rgb(163, 163, 163);
    width : auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

#footer {
    background: #2b2929 !important;
}
#footer h5{
    padding-top: 5%;
    padding-bottom: 6px;
    margin-bottom: 20px;
    color:#ee7117;
    font-family: "Roboto-bold";
}
#footer a {
    color: #ffffff;
    text-decoration: none !important;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
#footer ul.social li{
	padding: 3px 0;
}
#footer ul.social li a i {
    margin-right: 5px;
	font-size:15px;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}
#footer ul.social li:hover a i {
	font-size:25px;
	margin-top:-10px;
}
#footer ul.social li a,
#footer ul.quick-links li a{
	color:#ffffff;
}
#footer ul.social li a:hover{
	color:#eeeeee;
}
#footer ul.quick-links li{
	padding: 3px 0;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}
#footer ul.quick-links li:hover{
	padding: 3px 0;
	margin-left:5px;
	font-weight:700;
}
#footer ul.quick-links li a i{
	margin-right: 5px;
}
#footer ul.quick-links li:hover a i {
    font-weight: 700;
}


@media(min-width: 1200px)
{
    footer{
        padding-right: 10%;
        padding-right: 10%;
    }
}


/* Menu Emballages*/

.bouton-emballage
{
    margin: 50px;

}

#block-menu-emballages a
{
    text-align: center;
    border-radius: 50px;
    background-color: #ee7117;
    font-size: 15px;
    font-family: "Roboto-bold";
    color:#303030;
    border:none;
    margin-bottom: 20px;
    margin-top: 20px;
}

#block-menu-emballages a:hover
{
    color: white;
}

/* Nouv/Promo/BP/Destock */
a.bouton-rubrique {
    display: block;
    padding: 2%;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 50px;
    font-size: 1.2rem;
    background-color: white;
    border: solid 2px #ee7117;
    text-align: center;
    box-shadow: 1px 1px 4px #555;
    text-decoration: none;
    color: inherit;
}

a.bouton-rubrique:hover {
    background-color: #ee7117;
    text-decoration: none;
    color: inherit;
}

a.bouton-rubrique.active:hover {
    color: white;
}

a.bouton-categorie-document {
    display: block;
    padding: 2%;
    width: 70%;
    margin-top: 8px;
    margin-bottom: 5px;
    border-radius: 50px;
    font-size: 1.2rem;
    background-color: white;
    border: solid 2px #ee7117;
    text-align: center;
    box-shadow: 1px 1px 4px #555;
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

a.bouton-categorie-document:hover {
    background-color: #ee7117;
    text-decoration: none;
    color: inherit;
}

a.bouton-categorie-document.active:hover {
    color: white;
}

#TitreRayon {
    background: #ee7117;
    margin-top: 15px;
    font-size: 1.1rem;
    color: #ffffff;
    text-align: center;
    padding: 9px;
    -moz-box-shadow: 8px 5px 5px 1px #ccc;
    -webkit-box-shadow: 8px 5px 5px 1px #ccc;
    box-shadow: 8px 5px 5px 1px #ccc;
    text-transform: uppercase;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.nom-rayons {
    font-size: 1rem;
    list-style: none;
    margin-bottom: 2%;
    padding-top: 2%;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.nom-rayons a {
    color:black;
}
.nom-famille a {
    color:black;
}
.nom-sf a {
    color:black;
}

.nom-sf:hover {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.075);
}

.nom-sf:hover a{
    text-decoration: none;
    color:var(--codiclic_orange);
}

.img-actu-index{
    max-width: 70px;
    margin: 10px;
}
.nom-rayons a:hover {
    text-decoration: none;
    color:var(--codiclic_orange);
}

.nom-rayons:hover {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.075);
}

.nom-rayons:hover a {
    text-decoration: none;
    color:var(--codiclic_orange);
}

.nom-famille:hover {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.075);
}

.nom-famille:hover a{
    text-decoration: none;
    color:var(--codiclic_orange);
}

.nom-famille a:hover {
    text-decoration: none;
    color:var(--codiclic_orange);
}

.nom-sf a:hover {
    text-decoration: none;
    color:var(--codiclic_orange);
}

.nom-rayons a svg:hover {
    text-decoration: none;
    color:var(--codiclic_orange);
}

.nom-famille a svg:hover {
    text-decoration: none;
    color:var(--codiclic_orange);
}

.nom-rayons-menu-produit
{

    font-size: 15px;
    font-family: "Roboto-bold";
    list-style:none;
    /* margin-right: 20%; */
    cursor: pointer;
}

.nom-rayons-menu-produit:hover
{
    color: #212529;
    background-color: rgba(0, 0, 0, 0.075);
}

.nom-rayons-menu-produit:hover a{
    text-decoration: none;
    color:var(--codiclic_orange);
}

.nom-rayons-menu-produit a:hover
{
    text-decoration: none;
    color: var(--codiclic_orange);

}



.multi-column
{
    column-count: 2;
}


#menu-compte
{
    width: 200px;
}

.nom-famille {
    font-size: 14px;
    font-weight: normal;
    list-style: none;
    cursor: pointer;
}

.nom-sf {
    font-size: 14px;
    font-family: "Roboto-Light";
    list-style: none;
    cursor: pointer;
}

#separateur-rayon
{
    border-top: 0.5px solid rgb(255, 255, 255);
    width : auto;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;

}

#bandeau-info
{
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 50px;
    background-color:#ee7117;
}

#block-rayons {
    background: #e8e7e3;
    text-align: left;
    -moz-box-shadow: 8px 5px 5px 1px #ccc;
    -webkit-box-shadow: 8px 5px 5px 1px #ccc;
    box-shadow: 8px 5px 5px 1px #ccc;
    padding-left: 20px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#block-docs {
    background: #e8e7e3;
    text-align: left;
    -moz-box-shadow: 8px 5px 5px 1px #ccc;
    -webkit-box-shadow: 8px 5px 5px 1px #ccc;
    box-shadow: 8px 5px 5px 1px #ccc;
    padding-left: 20px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: scroll;
    overflow-x: hidden;
    height: 30em;
}

#block-docs ul {
    padding-left: 20px;
}

#block-rayons ul {
    padding-left: 20px;
}

.money:after{
    content: '€';
    opacity: 0.7;
    font-size: 1rem;
    font-size: inherit;
}

.pourcentage:after {
    content: '%';
    opacity: 0.7;
    font-size: 1rem;
}

/**** Boutons +/- panier/recherche/articles ****/

.input-group.panier-groupe-input-modifier-quantite-article {
    width: 120px;
}

.input-group.panier-groupe-input-modifier-quantite-article > input,
.input-group.panier-groupe-input-modifier-quantite-article > input.form-control {
    width: 50px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    border-left: none;
    border-right: none;
    border-color: #DEDEDE;
}

.input-group.panier-groupe-input-modifier-quantite-article > .input-group-prepend,
.input-group.panier-groupe-input-modifier-quantite-article > .input-group-append {
    width: 35px;
    display: flex;
    align-items: center;
    border-width: 1px;
    border-color: #DEDEDE;
    border-style: solid;
}

.input-group.panier-groupe-input-modifier-quantite-article > .input-group-prepend {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    justify-content: flex-end;
    padding-right: 9px;
}

.input-group.panier-groupe-input-modifier-quantite-article > .input-group-append {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    justify-content: flex-start;
    padding-left: 9px;
}

.input-group.panier-groupe-input-modifier-quantite-article > .input-group-prepend:hover,
.input-group.panier-groupe-input-modifier-quantite-article > .input-group-append:hover {
    background-color: var(--codiclic_orange);
    cursor: pointer;
}

.input-group.panier-groupe-input-modifier-quantite-article.inventaire > .input-group-prepend:hover,
.input-group.panier-groupe-input-modifier-quantite-article.inventaire > .input-group-append:hover {
    background-color: var(--codiclic_bleu);
    color: white;
    cursor: pointer;
}

.section_input_quantites > .panier-groupe-input-modifier-quantite-article,
.section_input_quantites > .bouton-panier-ajout-article {
    transition: right 0.2s ease;
    right: 0;
    position: relative;
}

.section_input_quantites > .bouton-panier-ajout-article {
    width: 40px;
    height: 40px;
}

.btn-indisponible {
    pointer-events: none;
}

.section_input_quantites > .panier-groupe-input-modifier-quantite-article.hidden,
.section_input_quantites > .bouton-panier-ajout-article.hidden{
    right: -100%;
}

/**** Boutons +/- panier/recherche/articles ****/

.input-group.panier-groupe-input-modifier-quantite-article-preco {
    width: 50px;
}

.input-group.panier-groupe-input-modifier-quantite-article-preco > input,
.input-group.panier-groupe-input-modifier-quantite-article-preco > input.form-control {
    width: 50px;
    height: 50px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    border-color: #DEDEDE;
    border-radius: 50% !important;
}

.input-group.panier-groupe-input-modifier-quantite-article-preco > .panier-groupe-input-modifier-quantite-article-preco-moins,
.input-group.panier-groupe-input-modifier-quantite-article-preco > .input-group-append {
    width: 35px;
    display: flex;
    align-items: center;
    border-width: 1px;
    border-color: #DEDEDE;
    border-style: solid;
}

.input-group.panier-groupe-input-modifier-quantite-article-preco > .panier-groupe-input-modifier-quantite-article-preco-moins {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    justify-content: flex-end;
    padding-right: 9px;
}

.input-group.panier-groupe-input-modifier-quantite-article-preco > .input-group-append {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    justify-content: flex-start;
    padding-left: 9px;
}

.input-group.panier-groupe-input-modifier-quantite-article-preco > .panier-groupe-input-modifier-quantite-article-preco-moins:hover,
.input-group.panier-groupe-input-modifier-quantite-article-preco > .input-group-append:hover {
    background-color: var(--codiclic_orange);
    cursor: pointer;
}

.section_input_quantites > .panier-groupe-input-modifier-quantite-article-preco,
.section_input_quantites > .bouton-panier-ajout-article {
    transition: right 0.2s ease;
    right: 0;
    position: relative;
}

.section_input_quantites > .bouton-panier-ajout-article {
    width: 40px;
    height: 40px;
}


.section_input_quantites > .panier-groupe-input-modifier-quantite-article-preco.hidden,
.section_input_quantites > .bouton-panier-ajout-article.hidden{
    right: -100%;
}


/**** Retrait des flèches plus/moins de HTML5 sur les champs numériques ****/
/* Chrome, Safari, Edge, Opera */
input.input-vignette::-webkit-outer-spin-button,
input.input-vignette::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input.input-vignette[type=number] {
    -moz-appearance: textfield;
}

/***** ARBORESCENCE ****/

/*** temporairement moche ****/


a.active {
    color: #ee7117;
    font-family: "roboto-bold";
}

/**** TABLES ***/

.table > thead > tr > th {
    border-top: none;
}

@media(max-width: 767px) {
    .table > thead > tr > th {
        border-top: none;
        padding-left: 2%;
        padding-right: 2%;
        text-align: center;
        margin: auto;
        font-size: 13px;
    }
    .table-libelle-deconsignation {
        font-size: 13px;
    }
}

/*** flash messages **/

.flash-message.alert {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translate(-50%);
    /* les modal ont un z-index de 1050 */
    z-index: 1051;
}


/** barre de filtres **/

#barre-filtre {
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: rgb(201, 199, 199);
    padding: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

#barre-filtre > * {
    margin-right: 15px;
}

#barre-filtre > #filtre-gamme {
    min-width: 20%;
    max-width: 50%;
}

.animated:hover {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
    0%, 100% {
        -webkit-transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-5px);
    }
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}
.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}
  
#filtres-recherche {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media(max-width: 767px) {
    #barre-filtre {
        flex-direction: column;
    }

    #barre-filtre > * {
        width: 50%;
        text-align: left;
    }

    #filtres-recherche {
        flex-direction: column;
    }
}

/** vignettes article  **/

.card.vignette-article {
    height: 100%;
    box-shadow: 1px 1px 4px #555;
}

.card.vignette-article > .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding: 0px;
}

.card.vignette-article > .card-body > .code-article {
    position: absolute;
    top: 5px;
    right: 0px;
    font-weight: bold;
    font-size: 0.9rem;
    padding-right: 8px;
}

.card.vignette-article.promo > .card-body:before {
    content: 'Promotion';
}

.card.vignette-article.nouveaute > .card-body:before {
    content: 'Nouveauté';
}

.card.vignette-article.bon-plan > .card-body:before {
    content: 'Bon Plan';
}

.card.vignette-article.destockage > .card-body:before {
    content: 'Déstockage';
}
.card.vignette-article.opp > .card-body:before {
    content: 'Opportunités';
}


.card.vignette-article.promo > .card-body:before,
.card.vignette-article.nouveaute > .card-body:before,
.card.vignette-article.bon-plan > .card-body:before,
.card.vignette-article.destockage > .card-body:before,
.card.vignette-article.opp > .card-body:before {
    position: absolute;
    top: 5px;
    left: -1px;
    font-weight: normal;
    font-size: 0.9rem;
    padding-right: 14px;
    padding-left: 14px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: var(--codiclic_orange);
    color: white;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.card.vignette-article > .card-body > .pictos-article {
    position: absolute;
    right: 2px;
    top: calc(1.5rem + 5px);
    height: calc(100% - 1.5rem - 5px);
    width: 30px;
    background-color: transparent;
}

.card.vignette-article > .card-body > .pictos-article > * {
    margin-bottom: 5px;
}

.card.vignette-article > .card-body > .pictos-article > img {
    width: 30px;
}

.card.vignette-article > .card-body > .pictos-article > .picto {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: blue;
}

.card.vignette-article > .card-body > .pictos-article > .picto.picto-surgeles {
    color:white;
    background-color: #99E8F8;
}

.card.vignette-article > .card-body > .pictos-article > .picto.picto-flux-tendu {
    color: var(--codiclic_orange);
    background-color: white;
    border: 1px solid var(--codiclic_orange);
}

.card.vignette-article > .card-body > .pictos-article > .picto.picto-ab,
.card.vignette-article > .card-body > .pictos-article > .picto.picto-ab > img {
    width: 25px;
    height: 25px;
}

.card.vignette-article img.image-article {
    width: 100%;
    max-width: 150px;
}

.card.vignette-article .marque-article {
   font-weight: bold;
    padding-right: 10px;
    padding-left: 10px;
}

.card.vignette-article .nom-article {
    font-weight: normal;
    color: var(--codiclic_orange);
    margin-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

.card.vignette-article .prix-cession-article {
    font-weight: bold;
    font-size: 1.3rem;
}

.card.vignette-article .prix-cession-article.special {
    color: var(--codiclic_orange);
}

.card.vignette-article .prix-cession-article-ref {
    text-decoration: line-through;
    font-size: 0.8rem;
    text-decoration-color: rgba(0,0,0,0.35);
}

.card.vignette-article .table-produits {
    margin-bottom: 2px;
}

.card.vignette-article .table-produits > thead > tr > th,
.card.vignette-article .table-produits > tbody > tr > td {
    padding: 4px;
    width: 33%;
    font-size: 0.85rem;
    text-align: center;
}

.card.vignette-article .table-produits > thead > tr > th{
    font-weight: bold;
}

.card.vignette-article .table-produits > tbody > tr > td {
    color: #666;
}

.card.vignette-article .ligne-prix-ajout-panier {
    padding: 10px;
    align-items: center;
}

@media(max-width: 991px) {
    .card.vignette-article .ligne-prix-ajout-panier {
        flex-direction: column;
    }
}


/** panier **/

.ligne-panier-article img.image-panier-article {
    max-height: 80px;
}

.ligne-panier-article.qte_uv_a_change {
    background-color: yellow;
}

.panier-activite a[data-toggle="collapse"] {
    width: 100%;
    text-align: left;
    text-decoration: none;
}

.panier-activite a[data-toggle="collapse"]:hover {
    text-decoration: none;
}

.panier-activite.card {
    margin-bottom: 15px;
    border-color: var(--codiclic_orange_dark);
}

.panier-activite.card > .card-body {
    overflow-x: scroll;
    max-width: 100%;
}

.panier-activite table.table > thead > tr > th {
    font-weight: normal;
    background-color: #EFEFEF;
    padding-right: 9px;
    padding-left: 9px;
    text-align: center;
}

.panier-activite table.table > tbody > tr > td {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 0.9rem;
    text-align: center;
}

.panier-activite .produit {
    display: flex;
    flex-direction: column;
}

.panier-activite .prix-panier {
    min-width: 60px !important;
}

.panier-activite .pvc {
    min-width: 60px !important;
}


@media(max-width: 991px) {
    
    .panier-activite .produit {
        display: flex;
        flex-direction: column;
        width: 150px;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .panier-activite table.table > tbody > tr > td {
        padding-right: 3px;
        padding-left: 3px;
        font-size: 0.9rem;
        text-align: center;
    }
}
@media(max-width: 767px) {
    .table-emballage-input {
        min-width: 50px;
        width: 50px !important;
    }
}

.panier-activite .produit > .libelle {

    color: var(--codiclic_orange);
}

.panier-activite .produit > .infos {
    font-weight: normal;
    font-size: 0.8rem;
}

.panier-activite > .card-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-top: 3px;
    padding-bottom: 3px;
}

.panier-activite > .card-footer dl.row {
    margin-right: 15px;
    margin-left: 5px;
    margin-bottom: 0px;
}

.panier-activite > .card-footer dl.row > dd {
    padding-left: 5px;
}

.carousel-inner {
    padding-right: 10% !important;
    padding-left: 10% !important;
}

.carousel-control-next {
    right: -10%;
    width: 10% !important;
}

.carousel-control-prev {
    left: -10%;
    width: 10% !important;
}

.carousel-item,
.carousel-item.active {

}

.totaux-panier {
    background-color: #EFEFEF;
}

@media(max-width: 768px) {
    .totaux-panier {
        margin-top: 1em;
    }
}

.totaux-panier dl.row:last-child{
    margin-bottom: 0px;
}

.totaux-panier .separator {
    background-color: #999;
    width: calc(100% - 30px);
    margin-left: 15px;
    height: 1px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 15px;
}

@media(min-width: 768px) {
    #conteneur-produit,
    #conteneur-contact,
    #conteneur-emballages {
        position: absolute;
        left: 0;
        top: 39px;
        width: 100vw;
        z-index: 1000;
    }
}

@media(max-width: 767px) {
    #conteneur-emballages > div.row > div {
        flex-direction: column;
    }
}

input.pvc_perso,
input.prix_special {
    max-width: 80px;
    padding-left: 4px;
    padding-right: 4px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pvcPerso
{
    color: rgba(0, 150, 0, 0.7);
}
input.pvc_perso.success,
input.prix_special.success {
    border-color: var(--success);
    background-color: rgba(0,255,0, 0.7);
}

input.pvc_perso.error,
input.prix_special.error {
    border-color: var(--danger);
    background-color: rgba(255, 0, 0, 0.7);
}

input.prix_special {
    border-color: var(--info);
}

.text-commercial {
    color: var(--info);
}

/**** positionnement div principal contenu ***/

#bandeau-top-header {
    height: 24px;
}

#bandeau-middle-header {
    height: 90px;
    padding-bottom: 25px;
    vertical-align: middle;
}

#form-recherche {
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}


#navigation-header {
    min-height: 40px;
}

footer {
    height: 248px;
}

#soustexte-footer {
    height: 22px;
}

@media(max-width: 991px) {

    #bandeau-middle-header {
        margin-bottom: 4px;
        height: auto;
        padding-bottom: 4px;
    }

    footer {
        height: 100%
    }

    #soustexte-footer {
        height: 66px;
    }
}

@media(min-width: 768px) {
    #panels {
        position: relative;
    }

    #panel-gauche {
        scrollbar-width: none;
    }

    #panel-gauche.sticky {
        top: 40px;
    }

    #panel-principal {
        scrollbar-width: none;
        min-height: calc(100vh - 24px - 90px - 40px - 248px - 22px);
    }
}

#panel-principal {
    padding-bottom: 10px;
    padding-top: 10px;
}

#block-connexion.commercial {
    background-color: lightblue;
    margin-top: 100px;
    margin-bottom: 100px;
    bottom: 0px;
}

#block-connexion.admin {
    background-color: mistyrose;
    margin-top: 100px;
    margin-bottom: 100px;
    bottom: 0px;
}

.btn.btn-orange {
    color: white;
    background-color: var(--codiclic_orange);
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.btn.btn-orange:hover {
    color: white;
    background-color: var(--codiclic_orange_dark);
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.btn.btn-red {
    color: white;
    background-color: rgb(214, 4, 4);
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.btn.btn-red:hover {
    color: white;
    background-color: rgb(151, 2, 2);
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}


.btn.btn-vert {
    color: white;
    background-color: var(--codiclic_vert);
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.btn.btn-vert:hover {
    color: white;
    background-color: var(--codiclic_vert_dark);
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}


.btn.btn-bleu {
    color: white;
    background-color: var(--codiclic_bleu);
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.btn.btn-bleu:hover {
    color: white;
    background-color: var(--codiclic_bleu_dark);
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.btn.btn-gris {
    color: white;
    background-color: #666;
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.btn.btn-gris:hover {
    color: white;
    background-color: #333;
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.btn.btn-blanc-orange {
    color: var(--codiclic_orange);
    border-color: var(--codiclic_orange);
    background-color: white;
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.btn.btn-blanc-orange:hover {
    color: var(--codiclic_orange_dark);
    border-color: var(--codiclic_orange_dark);
    background-color: white;
    border-radius: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

/*** bootstrap-toggle ***/

.btn.toggle.off {
    border-color: var(--danger);
}

.btn.toggle:not(.off) {
    border-color: var(--success);
}

.btn.toggle-handle {
    background-color: white;
}

.btn.toggle-on {
    background-color: var(--success);
    color: white;
}

.btn.toggle-on:hover {
    background-color: var(--success);
    color: white;
}

.btn.toggle-off {
    background-color: var(--danger);
    color: white;
}

.btn.toggle-off:hover {
    color: white;
}

/** cards generique **/

.card.card-orange {
    border-color: var(--codiclic_orange_dark);
}

.card.card-orange-clair {
    border-color: var(--codiclic_orange);
}

.card.card-bleu {
    border-color: var(--codiclic_bleu);
}

.card.card-vert {
    border-color: var(--codiclic_vert);
}

.card.card-vert > .card-header {
    background-color: var(--codiclic_vert);
    color: white;
}

.card.card-orange > .card-header {
    background-color: var(--codiclic_orange);
    color: white;
}

.card.card-orange-clair > .card-header {
    background-color: var(--codiclic_orange_clair);
    color: white;
}

.card.card-bleu > .card-header {
    background-color: var(--codiclic_bleu);
    color: white;
}

.card-collapse > a[data-toggle="collapse"] {
    width: 100%;
    text-align: left;
    text-decoration: none;
}

.card-collapse > a[data-toggle="collapse"][aria-expanded="true"]:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    opacity: 0.7;
    font-weight: 900;
    font-size: 1rem;
    font-size: inherit;
    width: 25px;
    display: inline-block;
}

.card-collapse > a[data-toggle="collapse"][aria-expanded="false"]:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    opacity: 0.7;
    font-weight: 900;
    font-size: 1rem;
    font-size: inherit;
    width: 25px;
    display: inline-block;
}

/*** Précommandes ***/

#precommandes-header {
    position: relative;
    height: 30px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--codiclic_orange);
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
}

#precommandes-header > h2 {
   background-color: white;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%);
    padding-right: 15px;
    padding-left: 15px;
}

.offres {
    height: 100%;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
}

.offres > img {
    width: 100%;
}

.recherche-preco
{
    margin-top: 20px;
    margin-bottom: 20px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border:1px solid;
    border-color: #000000;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    float: right;
    width: 18%;

}

.precommande {
    height: 100%;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.precommande:hover {
    content: 'Text affiche lors du hover';
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
}

.precommande.bleu {
    background-color: #000066;
}

.precommande.rouge {
    background-color: #80002a;
}

.precommande.vert {
    background-color: #004d00;
}

.precommande > a {
    width: 100%;
    display: block;
    color: white;
    text-decoration: none;
}

.precommande > a:hover {
    color: white;
    text-decoration: none;
}

.precommande img {
    width: 100%;
}

.precommande .content {
    text-transform: uppercase;
    padding-top: 45%;
    padding-bottom: 35%;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    color: black;
    background-color:lightgray;
    height: 300px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.precommande .content .titre {
    font-family: "Roboto-Bold";
    font-size: 1.2rem;
    margin-top: 6px;
    margin-bottom: 6px;
}

.precommande .content .dates {
    font-size: 0.9rem;
}

a.precommande-document {
    position: absolute;
    top: 16px;
    left: 16px;
    width: calc(100% - 16px - 16px);
    background-color: rgba(0,0,0, 0.7);
    text-decoration: none;
    color:white;
    font-size: 20px;
}

a.precommande-document:hover {
    background-color: rgba(0, 0, 0, 1);
    text-decoration: underline;
    color: white;
}

#table-precommandes > thead > tr > th {
    background-color: var(--codiclic_orange);
    color: white;
}

#table-precommandes-inactives > thead > tr > th {
    background-color: var(--codiclic_bleu);
    color: white;
}

.table-precommande > tbody > tr > td.precommande-image-liste {
    min-width: 300px;
    max-width: 300px;
}

.table-precommande > tbody > tr > td.precommande-image-liste img {
   width: 70%;
}

.table-precommande > tbody > tr > td.precommande-image-liste {
    padding: 0px;
}

.table-precommande > tbody > tr > td.precommande-image-liste > div {
    position: relative;
}

.table-precommande > tbody > tr > td.precommande-image-liste > div > .content {
    width: 100%;
    height: calc(100% - 16px);
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 35px;
    padding-bottom: 25px;
    padding-right: 10px;
    padding-left: 10px;
}

.table-precommande > tbody > tr > td.precommande-image-liste > div > .content > * {
    padding-right: 12px;
    padding-left: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.table-precommande > tbody > tr > td.precommande-image-liste > div > .content > .titre {
    font-family: Roboto-Bold;
    margin-bottom: 6px;
}

.table-precommande > tbody > tr > td.precommande-image-liste > div > .content > .dates  {
    font-size: 0.85rem;
}

thead.thead-gris > tr > th {
    background-color: var(--codiclic_orange);

}

.inaccessible-commercial {
    text-decoration: line-through !important;
    text-decoration-color: var(--info) !important;
    opacity: 0.4;
}

a.inaccessible-commercial,
a.inaccessible-commercial:hover
a.inaccessible-commercial:focus {
    text-decoration: line-through !important;
    text-decoration-color: var(--info) !important;
    opacity: 0.4;
}

.sticky {
    position: fixed !important;
    top: 55px;
}

@media(max-width: 767px) {
    .sticky.sticky-md {
        position: inherit !important;
        z-index: inherit;
    }
}

@media (max-width: 991px) {
    .sticky.sticky-lg {
        position: inherit !important;
        z-index: inherit;
    }
}

@media (min-height: 600px) {
    #bandeau-middle-header.sticky {
        transition: height 0.2s ease;
        padding-bottom: 4px;
        border-bottom: 1px solid #BBB;
        width: 100%;
        top: 0px;
        z-index: 3;
}
}



#table-preco .table
{
    width: 100%;
}

#header_preco.sticky_preco {
    transition: height 0.2s ease;
    z-index: 3;
}

@media(min-width: 991px) {
    #bandeau-middle-header.sticky {
        height: 50px;
    }
}

#bandeau-middle-header.sticky #form-recherche {
    padding-bottom: 8px;
}

#bandeau-middle-header > #logo-codiclic {
    padding: 0px;
}

#bandeau-middle-header > #logo-codiclic > img {
    height: 114px;
    position: absolute;
    z-index: 10;
}

@media(max-width: 991px) {
    #bandeau-middle-header > #logo-codiclic > img {
        display: none;
    }
}

#bandeau-middle-header.sticky > #logo-codiclic > img {
    height: 50px;
}

@media(max-width: 850px) {
    .card.totaux-panier.sticky {
        position: initial !important;
    }
}

@media(max-width: 991px) {
    #fournisseur-alimentaire {
        font-size: 0.72rem;
    }
}

#navigation-header-row.hide {
    display: none;
}

@media (min-width: 991px) {

    .card.totaux-panier.sticky {
        position: fixed;
        top: 55px;
        z-index: 1;
    }
}

#session-est-usurpee > .card {
    border-color: #005cbf;
}

#session-est-usurpee > .card > .card-header,
#session-est-usurpee > .card > .card-body {
    padding: 3px;
}

@media(min-width: 991px) {
    #session-est-usurpee {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 11;
    }
}

.forgotMdpLien{
    margin-top:20px;
}


.modal-body{
    margin: 1em;
}

.label-document-rubriques {
    font-size: 1.6rem;
    margin-top: 6px;
    margin-bottom: 6px;
}

ul.document-rubriques {
    list-style: none;
}

ul.document-rubriques > li.document-rubrique > a,
ul.document-rubriques > li.document-rubrique > a:hover {
    color: inherit;
    text-decoration: none;
    font-size: 1rem;
    margin-top: 6px;
    margin-left: 15%;
    margin-bottom: 3px;
    font-family: Roboto-Light;
}

ul.document-rubriques > li.document-rubrique > a:hover {
    font-family: Roboto;
}

.card.card-grise {
    background-color: #DEDEDE;
}

.text-orange {
    color: var(--codiclic_orange);
}

.text-red {
    color: red;
}

.text-bleu {
    color: var(--codiclic_bleu);
}

.card.card-grise h3.text-orange {
    color: var(--codiclic_orange);
    border-bottom: 1px solid white;
    margin-bottom: 10px;
}

.table-reclamation-lignes > tbody > tr > td {
    font-family: "Roboto-Light";
}

.select2-selection.select2-selection--single {
    height: calc(1.5em + .75rem + 2px) !important;
}

.select2.select2-container.select2-container--default {
    width: 100%;
    /* height: calc(1.5em + .75rem + 2px); */
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.select2.select2-container.select2-container--default .select2-selection {
    /* height: 100%; */
    /* border: 1px solid #ced4da; */
    border: none;
}

.select2.select2-container.select2-container--default .select2-selection__arrow {
    height: 100%;
}

.select2-selection__rendered {
    height: 100%;
    display: flex !important;
    align-items: center;
}

.form-check input:not(.form-check-input) {
    margin-top: 0.6em;
}

.form-check-input{
    position: relative !important;
    margin-left: 0 !important;

}
.form-check{
    padding-left: 0 !important;

}

.custom-file-label::after {
    content: "Parcourir" !important;
}

dl.dl-reclamation-lignes > dt,
dl.dl-reclamation-lignes > dd {
    line-height: 1.2rem;
    font-size: 1rem;
}

dl.dl-reclamation-lignes > dt {
    font-family: Roboto;
}

.reclamation-prospectus-ligne {
    border: 1px solid #CACACA;
    border-radius: 4px;
    position: relative;
    margin-bottom: 4px;
}

.reclamation-prospectus-ligne > .reclamation-prospectus-ligne-delete {
    display:none;
}

.reclamation-prospectus-ligne:last-child:not(:first-child) > .reclamation-prospectus-ligne-delete {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
}

.reclamation-prospectus-ligne > .reclamation-prospectus-ligne-delete:hover {
    cursor: pointer;
}

.table-orange > thead > tr > th {
    background-color: var(--codiclic_orange);
    color: white;
}

.table-bleu > thead > tr > th {
    background-color: var(--codiclic_bleu);
    color: white;
}

.table-ligne-cliquable > tbody > tr{
    cursor: pointer;
}

#modalPrecoModalite > .modal-dialog {
    max-width: 80vw !important;
}

#modalPrecoModalite .modal-body > img {
    max-width: 100%;
}

@media(max-width: 767px) {
    #modalPrecoModalite > .modal-dialog {
        max-width: 100vw !important;
    }
}

#nav-recherche {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#nav-recherche a,
#nav-recherche a:hover,
#nav-recherche a:focus,
#nav-recherche a:active {
    text-decoration: none;
}

#nav-recherche > * {
    padding: 5px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
}

#nav-recherche > *:first-child {
    text-align: left;
}

#nav-recherche > *:last-child {
    text-align: right;
}

img.image-base-doc {
    max-height: 30%;
    max-width: 50px;
}

#breadcrumb > nav > .breadcrumb {
    background-color: transparent;
    margin-bottom: 0px;
    font-family: Roboto-Light;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
}

.breadcrumb-item.active {
    color: var(--codiclic_orange) !important;
    font-family: Roboto;
}

.breadcrumb-item a {
    color: black;
}

.breadcrumb-item a:hover {
    color: var(--codiclic_orange);
    text-decoration: none;
}

#bandeau-top-header.commercial {
    background-color: lightblue;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

•bandeau-commercial {
    padding-left: 10px;
}

a#lien-retour-clients,
a#lien-retour-clients:hover {
    text-decoration: none;
    background-color: red;
    color:white;
    padding-left: 10px;
    padding-right: 10px;
}



.search_facture {
    margin-bottom: 10px;
    background-color:rgb(255, 255, 255);
    padding: 10px;
    border: solid 0.1rem black;
    width: 20% !important;

}
@media(max-width: 767px) { 
    .search_facture {
        margin-bottom: 10px;
        background-color:rgb(255, 255, 255);
        padding: 10px;
        border: solid 0.1rem black;
        width: 50% !important;

    }
}

.search_commercial
{
    margin-bottom: 10px;
    background-color:rgb(255, 255, 255);
    padding: 10px;
    border: solid 0.1rem black;
    width: 21% !important;

}

tr.ligne-precommande > td.image > img {
    height: 35px;
}

tr.echeance.avoir > td.montant {
    color: var(--success);
}

tr.echeance.facture > td.montant {
    color: var(--danger);
}

tr.facture_autre.avoir > td.montant {
    color: var(--success);
}

tr.facture_autre.facture > td.montant {
    color: var(--danger);
}


.vignette-article .plus-au-catalogue {
    position: absolute;
    left:-1px;
    top: -1px;
    background-color: red;
    color: white;
    font-size: 0.7rem;
    padding-right: 3px;
    padding-left: 3px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.vignette-article .en-cours-reappro {
    position: absolute;
    left: -1px;
    top: -1px;
    background-color: red;
    color: white;
    font-size: 0.7rem;
    padding-right: 3px;
    padding-left: 3px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
}


.vignette-article .article-remplace {
    position: absolute;
    left: -1px;
    top: -1px;
    background-color: red;
    color: white;
    font-size: 0.82rem;
    padding-right: 3px;
    padding-left: 3px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.vignette-article .article-remplace > a,
.vignette-article .article-remplace > a:hover,
.vignette-article .article-remplace > a:visited{
    text-decoration: none;
    color: inherit;
}

.table-precommande-livraisons > tbody > tr > td {
    border: none;
    padding: 4px;
}

.image-article:hover,
.ligne-panier-article img:hover{
    cursor: zoom-in;
}

.zone-rebond-catalogue
{
    float: right;
    color: var(--codiclic_orange);
}

/***  dépli/repli panneau totaux précommandes ***/

#panneau-totaux {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 1rem;
    z-index: 15;
}

#panneau-totaux > #totaux-panier-ou-preco {
    right: 5px;
    position: fixed;
    margin-top: 0px;
    max-width: 30%;
}

@media (max-width: 991px) {
    #panneau-totaux {
        top: 22px;
    }

    #panneau-totaux > #totaux-panier-ou-preco {
        right: 2px;
        max-height: calc(100vh - 90px);
        overflow-y: scroll;
        max-width: 80%;
    }
}

@media(min-width: 1200px) {
    #panneau-totaux > #totaux-panier-ou-preco {
        max-width: 20%;
    }
}

#totaux-panier-ou-preco > div.card-body {

}

#panneau-totaux.replie > #totaux-panier-ou-preco > div.card-body,
#panneau-totaux.replie > #totaux-panier-ou-preco > div.card-footer,
#panneau-totaux.replie > #totaux-panier-ou-preco > div.card-header > :not(button) {
    padding: 0 !important;
    display: none;
    visibility: hidden;
    transition: visibility 0.8s ease;
}

#panneau-totaux #deplier-replier-totaux:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0d9";
    color: white;
    font-weight: 900;
}

#panneau-totaux:not(.replie) #deplier-replier-totaux:before {
    content: "\f0da";
}

.bouton-panier-ajout-ligne-preco {
    margin: auto;
}

#panneau-principal table > tbody > tr > td {
    padding-right: 4px;
    padding-left: 4px;
}

#modalActuContent .modal-header,
#modalActuContent .modal-header a {
    background-color: var(--codiclic_orange);
    color: white;
}

#modalActuContent .modal-body {
    padding: 0px;
    margin: 0px;
}


#modalActuContent .modal-footer,
#modalActuContent .modal-body > .tout-marquer-lu {
    background-color: var(--codiclic_orange_clair);
    color: white;
}

#modalActuContent .modal-footer:hover,
#modalActuContent .modal-body > .tout-marquer-lu:hover {
    cursor: pointer;
}

#modalActuContent .actualite > .actualite-contenu.row {
    margin: 0px;
    font-size: 0.9rem;
    font-weight: normal;
    position: relative;
}

#modalActuContent .actualite.lue > .actualite-contenu {
    opacity: 0.6;
}

#modalActuContent .actualite:not(:last-child) {
    border-bottom: 1px solid var(--codiclic_orange);
}

#modalActuContent .actualite .image-actualite > img {
    width: 80px;
}

#modalActuContent .actualite .image-actualite {
    padding-right: 0px;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
}

#modalActuContent .actualite:not(.lue) .image-actualite:before {
    content: "";
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--codiclic_orange);
    position: absolute;
    left:2px;
    top: 50%;
}


/* echeancier */
.th-statut
{
    width: 215px;
}

#modalActuContent .actualite h3{
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--codiclic_orange);
}


#modalActuContent .actualite:hover {
    filter: brightness(85%);
    background-color: rgba(0,0,0,0.3);
}

#modalActuContent .actualite:hover img{
    filter: brightness(82%);
}


#modalActuContent .actualite.lien:hover {
    /* cursor: pointer; */
}

#modalActuContent .actualite texte-actualite {
    padding-top: 5px;
}

#categories-document {
    position: absolute;
}

.overflow-scroll {
    overflow: scroll;
}



/*table.table-articles-preco > thead {
    width: calc(100% - 1em) /* scrollbar is average 1em/16px width, remove it from thead width
}
*/
.marque_preco
{
    color: black;
    font-weight: bold;
}

table.table-articles-preco > thead > tr > th,
table.table-articles-preco > tbody > tr > td {
    padding-left: 0px !important;
    padding-right: 0px !important;
    text-align: center;
}

table.table-articles-preco > thead > tr > th.th-article,
table.table-articles-preco > tbody > tr > td.td-article {
    padding-left: 10px !important;
    padding-right: 0px !important;
    text-align: left !important;
}

table.table-articles-preco > thead > tr > th.th-infos,
table.table-articles-preco > tbody > tr > td.td-infos {
    padding-left: 10px !important;
    padding-right: 0px !important;
    text-align: left !important;
}

.th_preco
{
    background-color: #efefef;
    font-size: 0.9rem !important;
    text-align: center !important;
}

.th-images,
.td-images
{
   min-width: 90px ;
   width: 90px !important;
}


.th-theme,
.td-theme
{
   min-width: 60px;
   width: 60px !important;
}

.th-article,
.td-article
{
    min-width: 300px;
    width: 300px !important;
}

.th-uv,
.td-uv
{
    min-width: 30px ;
    width: 30px !important;
}

.th-pa,
.td-pa
{
    min-width: 50px;
    width: 50px !important;
}

.th-pv,
.td-pv
{
    min-width: 50px;
    width: 50px !important;
}

.th-infos,
.td-infos
{
    min-width: 300px;
    width: 300px !important;
}

.th-resp,
.td-resp
{
    min-width: 30px ;
    width: 30px !important;
}




table.table-articles-preco > tbody > tr.separateur > td {
    padding-top: 35px;
    border: none;
    font-size: 1.1rem !important;
    font-weight: bold;
    color:white;
    background-color: var(--codiclic_orange);
}

table.table-articles-preco > tbody > tr.separateur > td > span {
    top: 10px;
    left: 2px;
    padding-left: 20px;
}

table.dataTable.dtr-column > tbody > tr.separateur > td.dtr-control::before {
    display: none;
}


table.dataTable.dtr-column > tbody > tr.ligne-panier-article > td.dtr-control::before {
    font-family: "Font Awesome 5 Free";
    content: "\f358";
    height: 25px;
    width: 25px;
    position: static;
    display: flex !important;
    justify-content: center !important;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.5;
    background-color: var(--codiclic_orange);
}

table.dataTable.dtr-column > tbody > tr.child > td.child {
    text-align: left;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    margin-left: 100px !important;
}

.text-bold
{
    font-weight: bold;
}


.non-visible
{
    display: none !important;
}

.charger-plus {
    margin-top: 5%;
    margin-bottom: 5%;
    width: 35%;
    text-align: center !important;
    font-size: large !important;
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--codiclic_orange); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }

  #myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
  }