.chargement {
font-size: 30px;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
text-align: center;
margin-bottom: 50px;
}
.chargement span {
display: inline-block;
margin: 0 -0.075em;
-webkit-animation: animation-chargement 0.9s infinite alternate;
animation: animation-chargement 0.9s infinite alternate;
}
.chargement span:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.chargement span:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.chargement span:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.chargement span:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.chargement span:nth-child(6) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.chargement span:nth-child(7) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.chargement span:nth-child(8) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.chargement span:nth-child(9) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.chargement span:nth-child(10) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes animation-chargement {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes animation-chargement {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
.liste-fournisseurs #mainSearch,
.grille-fournisseurs #mainSearch{ 
width: 100%; 
padding: 12px; 
text-align: center; 
border-radius: 6px; 
border: 1px solid #888; 
font-size: 21px;
}
.bg-branding{
background-color: #666;
}
.bg-white.text-branding,
.text-branding{
color: #666;
}
div.categories .border-branding,
.border-branding{
border-color: #666;
}
.text-white{
color: #fff;
}
.bg-white{
background-color: #fff;
}
.mb-1 {
margin-bottom: 4px !important;
}
.mt-2 {
margin-top: 8px !important;
}
div.categories{
text-align: center;
}
div.categories .bouton span{
display: inline-block;
padding: 2px 6px;
text-align: center;
font-size: 12px;
line-height: 1em;
font-weight: bold;
border-radius: 1000px;
background-color: #fff;
color: #666;
margin-left: 4px;
border: 1px solid #666;
}
.onglet-fournisseur{
margin-top: 30px;
padding-bottom: 24px;
display: flex;
flex-wrap: wrap;
line-height: 1.5em;
border-bottom: 5px dotted #e4e4e4;
}
.onglet-fournisseur p{
text-align: left !important;
padding: 0px;
}
.onglet-fournisseur p,
.onglet-fournisseur ol, 
.onglet-fournisseur ul{
margin-bottom: 16px;
}
.onglet-fournisseur .fournisseur-infos{
flex: 0 0 auto;
width: 100%;
padding: 0px 12px;
}
@media (min-width: 768px) {
.onglet-fournisseur .fournisseur-infos{
flex: 0 0 auto;
width: 25%;
}
}
.onglet-fournisseur .fournisseur-infos img{
width: 100%;
max-width: 300px;
height: auto;
margin: auto;
margin-bottom: 25px;
margin-top: 10px;
padding: 0px;
background: none;
border: none;
}
.onglet-fournisseur .fournisseur-details{
display: flex;
flex-wrap: wrap;
flex: 1 0 0%;
padding: 0px 12px;
margin-left: -12px;
margin-right: -12px;
}
.onglet-fournisseur .fournisseur-details .colonne{
flex: 1 0 0%;
padding: 0px 12px;
}
@media (min-width: 576px) {
.onglet-fournisseur .fournisseur-details .colonne-demi{
width: 50%;
}
}
.onglet-fournisseur .fournisseur-nom{
font-size: 24px;
margin-bottom: 8px;
font-weight: 600;
line-height: 1.2;
margin-top: 0;
padding: 0;
}
.onglet-fournisseur .fournisseur-categorie{
color: #6c757d !important;
margin-top: -4px !important;
margin-bottom: 8px;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
padding: 0;
}
.onglet-fournisseur .fournisseur-produits{
color: #6c757d !important;
margin-top: -4px !important;
margin-bottom: 8px;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
padding: 0;
}
.onglet-fournisseur .fournisseur-label{
display: inline-block;
padding: 5px 10px;
font-size: .75em;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 4px;
}
.onglet-fournisseur .bouton{
text-decoration: none;
display: inline-block;
padding: 4px 8px;
border: 1px solid #000;
line-height: 1em;
border-radius: 9999px 9999px;
margin-top: 5px; 
margin-right: 5px; 
background-color: #fff;
}
.onglet-fournisseur .bouton:hover{
cursor: pointer;
box-shadow: 1px 2px 5px rgba(0,0,0,0.25);
}
button.bouton{
text-decoration: none;
display: inline-block;
padding: 4px 8px;
border: 1px solid #000;
line-height: 1em;
border-radius: 9999px 9999px;
margin-top: 5px; 
margin-right: 5px; 
background-color: #fff;
border-width: 2px;
}
button.bouton:hover{
box-shadow: 1px 2px 5px rgba(0,0,0,0.25);
cursor: pointer;
}
button.bouton.active{
box-shadow: 1px 2px 5px rgba(0,0,0,0.25);
font-weight: bold;
border-width: 2px;
}
button.bouton:focus{
outline: none;
}
#sacapi_password_wrapper{
text-align: center;
}
.sacapi_password_input{ 
width: 100%; 
padding: 12px 48px 12px 12px; 
text-align: center; 
border-radius: 6px; 
border: 2px solid #000000; 
font-size: 21px;
box-sizing: border-box;
}
.sacapi_password_fieldgroup {
position: relative;
width: 100%;
}
.sacapi_toggle_password {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
background: none;
border: none;
padding: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.5;
width: 35px;
height: 35px;
color: #000;
}
.sacapi_toggle_password:hover {
opacity: 1;
}
.sacapi_toggle_password:focus {
outline: none;
}
.sacapi_toggle_password svg{
width: 100%;
height: 100%;
color: inherit;
}
.grille-fournisseurs .grille-container{
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grille-fournisseurs .grille-container .fournisseur{
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: center;
}
.grille-fournisseurs .grille-container .fournisseur img{
max-width: 90%;
max-height: 100px;
height: auto;
width: auto;
object-fit: contain;
}
.grille-fournisseurs .grille-container .fournisseur .fournisseur-categorie{
display: inline-block;
padding-top: 20px;
font-size: .8em;
font-weight: 400;
font-style: italic;
line-height: 1;
text-align: center;
vertical-align: baseline;
}