body {

    padding-top: 50px;

    padding-bottom: 20px;

}





/* Set padding to keep content from hitting the edges */

.body-content {

    padding-left: 15px;

    padding-right: 15px;

}



/* Classe spécifique pour le formulaire */

.form-full-width {

    margin-left: -15px; /* Annuler le padding gauche */

    margin-right: -15px; /* Annuler le padding droit */

    width: calc(100% + 30px); /* Élargir pour compenser les marges négatives */

}



/* Set width on the form input elements since they're 100% wide by default */

input,

select,

textarea {

    max-width: 280px;

}



/* styles for validation helpers */

.field-validation-error {

    color: #b94a48;

}



.field-validation-valid {

    display: none;

}



input.input-validation-error {

    border: 1px solid #b94a48;

}



input[type="checkbox"].input-validation-error {

    border: 0 none;

}



.validation-summary-errors {

    color: #b94a48;

}



.validation-summary-valid {

    display: none;

}





.dashboard {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    gap: 20px;

    padding: 20px;

    margin: 0 auto;

    width: calc(100% - 40px);

    max-width: 1200px;

}



@media (min-width: 768px) {

    .dashboard {

        text-align: center;

        width: calc(100% - 250px);

    }

}



.module {

    background-size: cover;

    background-position: center;

    height: 250px;  /* Hauteur fixe pour la cohérence */

    display: flex;

    align-items: flex-end;

    justify-content: center;

    cursor: pointer;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    transition: transform 0.3s ease-in-out;

}



.module:hover {

    transform: scale(1.05);

}



.module-content {

    width: 100%;

    background: rgba(0, 0, 0, 0.5); /* Assure la lisibilité du texte */

    color: white;

    text-align: center;

    padding: 10px 0;

    font-size: 20px;

    border-radius: 0 0 8px 8px;

}







.profile-container {

    max-width: 600px;

    margin: 20px auto;

    padding: 20px;

    border: 1px solid #ccc;

    border-radius: 8px;

    background-color: #f9f9f9;

}





.profile-circle {

    display: inline-block;

    width: 40px;

    height: 40px;

    background-color: #007BFF; /* Bleu par défaut */

    color: white !important; /* Garde la lettre en blanc */

    text-align: center;

    line-height: 40px;

    border-radius: 50%;

    font-size: 18px;

    font-weight: bold;

    margin-top: 5px;

    transition: background-color 0.3s;

    position: relative; /* Ajouté pour le positionnement de la lettre */

}



.profile-circle::after {

    content: attr(data-letter); /* Utilise un attribut pour la lettre */

    position: absolute;

    left: 50%; /* Centré horizontalement par défaut */

    top: 50%; /* Centré verticalement par défaut */

    transform: translate(-50%, -50%); /* Décale la lettre à gauche et vers le haut */

    color: white;

}



.navbar-right .profile-circle {

    text-decoration: none; /* Enlève tout soulignement */

}



.navbar-right .profile-circle:hover {

    background-color: #1a5ba1 !important; /* Maintient la couleur de fond au survol */

    color: white; /* Assure que la couleur du texte reste blanche */

}



/* Pour les grands écrans */

@media (min-width: 769px) {

    .navbar-nav .profile-mobile {

        display: none !important; /* Masque le profil mobile sur les grands écrans */

    }

    .navbar-nav .profile-desktop {

        display: block !important; /* Affiche le profil desktop sur les grands écrans */

    }

}



/* Pour les petits écrans */

@media (max-width: 768px) {

    .navbar-nav .profile-desktop {

        display: none !important; /* Masque le profil desktop sur les petits écrans */

    }

    .navbar-nav .profile-mobile {

        display: block !important; /* Affiche le profil mobile sur les petits écrans */

        bottom: 0;

        text-align: center; /* Centre le lien */

        padding: 10px 0; /* Ajoute du padding pour rendre le lien plus grand */

        margin-left: 10px;

    }

}



.center-container {

    display: flex;

    justify-content: center; /* Centre horizontalement */

    align-items: flex-start; /* Aligner les éléments au début verticalement */

    height: 70vh; /* Réduire la hauteur totale pour élever le bouton */

    padding-top: 20px; /* Ajouter un padding en haut pour éviter que le bouton touche le bord */

}



.btn-peser {

    padding: 40px 80px; /* Augmenté pour un bouton plus grand */

    border-radius: 15px; /* Rayon de bordure augmenté pour l'esthétique */

    border: 0;

    background-color: rgb(0, 123, 255); /* Couleur bleue appliquée */

    letter-spacing: 2px; /* Espacement des lettres légèrement augmenté */

    font-size: 32px; /* Taille de police augmentée pour un bouton plus grand */

    transition: all 0.3s ease;

    box-shadow: rgb(0, 98, 204) 0px 15px 0px 0px; /* Ombre ajustée */

    color: hsl(0, 0%, 100%);

    cursor: pointer;

    display: block; /* S'assurer que le bouton est un bloc pour faciliter le centrage */

}



.btn-peser:hover {

    box-shadow: rgb(0, 98, 204) 0px 12px 0px 0px; /* Ajustement de l'effet hover */

}



.btn-peser:active {

    background-color: rgb(0, 104, 218); /* Couleur active un peu plus foncée */

    box-shadow: rgb(0, 78, 163) 0px 0px 0px 0px; /* Ombre en état actif réduite */

    transform: translateY(5px);

    transition: 200ms;

}



/* Styles par défaut pour les grands écrans */

.responsive-title {

    font-size: 2.5rem; /* taille par défaut */

}

.responsive-lead {

    font-size: 2rem; /* taille par défaut */

}



/* Adaptations pour les petits écrans */

@media (max-width: 576px) {

    .responsive-title {

        font-size: 2rem; /* plus petit pour les petits écrans */

    }

    .responsive-lead {

        font-size: 1.5rem; /* plus petit pour les petits écrans */

    }

}



.container-mobile {

    margin-top: -50px;

} 



/* SILO SUPERVISION */



.container-silo-supervision {

    display: grid;

    height: 80vh; /* Utilise toute la hauteur de la fenêtre */

    width: 95vw; /* Utilise toute la largeur de la fenêtre */

    grid-template-columns: 100px 1fr 1fr;

    grid-template-rows: auto 1fr 1fr; /* trois rangées */

    gap: 20px; /* Espacement entre les graphiques */

    padding-left: 0; /* Annule le padding à gauche */

    margin-left: -350px;/* Compense le padding externe si nécessaire */

    margin-top: -80px;

} 

.container-silo-supervision-eps {

    height: 100vh; /* Utilise toute la hauteur de la fenêtre */



} 



.label-ligne {

    grid-column: 1 / 2; /* Occupe la première colonne */

    grid-row: span 1; /* S'étend sur deux lignes */

    writing-mode: vertical-lr; /* Texte vertical */

    transform: rotate(180deg); /* Inverse le texte pour la lisibilité */

    display: flex;

    align-items: center; /* Centrer le contenu verticalement */

    justify-content: center; /* Centrer le contenu horizontalement */

    font-size: 18px; /* Taille du texte */

    color: #333; /* Couleur du texte */

    background-color: #f5f5f5; /* Couleur de fond */

}



.label-colonne {

    text-align: center; /* Centrer le texte dans la colonne */

    font-size: 18px; /* Taille du texte pour les titres de colonne */

    color: #333; /* Couleur du texte */

    font-weight: bold;

}







.graph-silo {

    background-color: #f5f5f5; /* Couleur de fond pour visualiser les zones */

    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Ombre pour distinguer les zones */

    margin-left: -15px; /* Compense pour le padding du .body-content */



}





.full-width-btn {

    width: 100%; /* Prend toute la largeur */

    height: 50%; /* Prend la moitié de la hauteur de la fenêtre */

    font-size: 24px; /* Taille de la police */

    padding: 20px; /* Espacement interne */

    border: none; /* Pas de bordure */

    color: white; /* Couleur du texte */

    background-color: #007BFF; /* Couleur de fond */

    transition: background-color 0.3s; /* Animation de la couleur de fond */

}

.full-width-btn:hover {

    background-color: #0056b3; /* Couleur de fond au survol */

}





.dashboard-crm {

    display: flex;

    justify-content: center;

    gap: 20px; /* Espace entre les cartes */

    flex-wrap: wrap; /* Pour que les cartes se réorganisent sur plusieurs lignes si nécessaire */



}



.app-crm {

    width: 260px;

    height: 250px;

    background-size: cover;

    background-position: center;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    cursor: pointer;

    transition: transform 0.3s ease-in-out;

}



.app-crm:hover {

    transform: scale(1.05);

}



.app-crm-content {

    color: white;

    font-size: 20px;

    width: 100%;

    text-align: center;

    padding: 10px 0;

    border-radius: 0 0 8px 8px;

    background: rgba(0, 0, 0, 0.5); /* Assure la lisibilité du texte */

}



.checkbox-group {

    display: flex;

    justify-content: start; /* Distribution uniforme */

    align-items: center; /* Alignement vertical */

    width: 100%; /* Prend toute la largeur disponible */

}



.checkbox-container {

    display: flex;

    flex-direction: column; /* Change la direction de flex pour être en colonne */

    align-items: start;

    justify-content: center; /* Centre les éléments verticalement dans le conteneur */

    padding: 0 10px 0 5px; /* Espacement interne pour éviter que les éléments soient trop serrés */

}



.checkbox-container label {

    margin-bottom: 5px; /* Espacement entre le label et la case à cocher */

}



.checkbox-cdc {

    cursor: pointer; /* Style du curseur */

    width: 30px; /* Largeur fixe pour la checkbox */

    height: 30px; /* Hauteur fixe pour la checkbox */

    border-radius: 5px; /* Bords arrondis */

}





/* From Uiverse.io by Pradeepsaranbishnoi */ 

.container-radio {

    display: flex;

    justify-content: start;

    align-items: center;

}

  

  .radio-tile-group {

    display: flex;

    justify-content: center;

  }

  input[type="text"].input-container,
  input[type="number"].input-container {
    height: 40px;
    margin: 0.5rem;
  }

  .radio-tile-group .input-container {

    position: relative;

    width: 90px;

    height: 40px;

    margin: 0.5rem;

  }

  

  .radio-tile-group .input-container .radio-button {

    opacity: 0;

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    margin: 0;

  }

  

  .radio-tile-group .input-container .radio-tile {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    border: 1px solid #428bca;

    border-radius: 5px;

    padding: 1rem;

    transition: transform 300ms ease, background-color 300ms ease;

    cursor: pointer;

  }

  

  

  .radio-tile-group .input-container .radio-tile-label {

    text-align: center;

    font-size: 12px;

    color: #428bca;

    margin-top: 5px;

  }

  

  .radio-tile-group .input-container .radio-tile:has(> .radio-button:checked) {

    background-color: #428bca;

    border-color: #428bca;

    color: white;

    transform: scale(1.1, 1.1);

  }

  

  .radio-tile-group .input-container .radio-tile:has(> .radio-button:checked) .icon svg {

    fill: white;

    background-color: #428bca;

  }

  

  .radio-tile-group .input-container .radio-tile:has(> .radio-button:checked) .radio-tile-label {

    color: white;

  }

  



/* ONGLET */



.button-container {

    text-align: right; /* Alignement à droite du contenu du conteneur */

    margin: 20px; /* Espacement autour du conteneur pour un peu de marge */

}

/* Container pour les onglets avec défilement horizontal */

.tab {

    overflow-x: auto;

    white-space: nowrap;

    background-color: #f1f1f1;

    font-family: Arial, sans-serif;

    border-bottom: 1px solid #ccc;

    scrollbar-width: none; /* pour Firefox */

    -ms-overflow-style: none; /* pour Internet Explorer et Edge */

}



.tab::-webkit-scrollbar {

    display: none; /* pour Chrome, Safari et Opera */

}



/* Style des boutons dans l'onglet */

.tab button {

    background-color: inherit;

    display: inline-block;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 10px 15px;

    font-size: 16px;

    border-right: 1px solid #ccc;

    margin-left: -4px; /* Ajustement de la marge pour aligner les bordures */

}



/* Suppression de la bordure gauche pour le premier bouton */

.tab button:first-child {

    border-left: none;

    margin-left: 0; /* Pas de marge négative pour le premier bouton */

}



/* Style pour le bouton actif */

.tab button.active {

    background-color: #ccc;

    color: #000;

    border-bottom: 3px solid #428bca; /* Bordure plus large pour couvrir l'espace */

    padding-bottom: 9px; /* Ajustement du padding pour compenser la bordure plus épaisse */

}



/* Change background color of buttons on hover */

.tab button:hover {

    background-color: #ddd;

}



/* Style pour le contenu de l'onglet */

.tabcontent {

    display: none;

    padding: 20px 25px;

    border-top: none;

    background-color: #fff;

}

  

.button-container {

    text-align: right; /* Alignement à droite du contenu du conteneur */

    margin: 20px; /* Espacement autour du conteneur pour un peu de marge */

}





.button-group {

    flex-grow: 1;

    margin: auto;

  }

  

  .button-group input[type="radio"] {

    display: none;

  }

  

  .button-group label {

    display: inline-block;

    padding: 10px 20px;

    cursor: pointer;

    border: 1px solid #428bca;

    background-color: white;

    color: #428bca;

    border-radius: 5px;

    transition: all ease 0.2s;

    text-align: center;

    flex-grow: 1;

    flex-basis: 0;

    width: 90px;

    font-size: 13px;

    box-shadow: 0px 0px 50px -15px #000000;



  }

  

  .button-group input[type="radio"]:checked + label {

    background-color: #428bca;

    color: white;

    border: 1px solid #2a6aa2;

  }

  

  fieldset {

    display: flex;

    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */

    align-items: center; /* Centre les éléments verticalement */

    justify-content: space-around; /* Distribue l'espace autour des éléments */

}



.error_message {

    color: #721c24; /* Couleur rouge foncé pour une meilleure visibilité et moins d'agressivité */

    background-color: #f8d7da; /* Fond rouge pâle */

    border-color: #f5c6cb;

    padding: 10px; /* Espace intérieur pour un meilleur rendu */

    border-radius: 4px; /* Coins arrondis pour un look moderne */

    margin: 10px 0; /* Marge pour séparer le message des autres éléments */

    border: 1px solid transparent; /* Bordure discrète */

    display: none; /* Initialement caché */

}



@media (max-width: 768px) {

    .error_message {

        padding: 8px; /* Moins de padding sur les petits écrans */

        font-size: 14px; /* Taille de police adaptée pour une meilleure lisibilité */

    }

}



.checkbox-image {

    width: 50px; /* responsive */

    height: auto;

    margin-bottom: 10px;

}



.couleur-group .controls {

    display: flex;

    align-items: center;

    width: 100%;

}



.couleur-group .controls > * {

    margin: 5px; /* Espacement entre les éléments */

}



/* Ajustement spécifique de la flexibilité des éléments */

.couleur-group .toggle-selection {

    flex-grow: 0.5; /* Moins d'espace pour le select de toggle */

    width: 30%; /* Définit une largeur maximale */

}



.couleur-group .color-select {

    flex-grow: 1.5; /* Plus d'espace pour le select de couleur */

}



.couleur-group .pantone-input {

    flex-grow: 1.5; /* Plus d'espace pour l'input Pantone, similaire au color-select */

}



/* Ajustement de la taille du bouton de suppression */

.couleur-group .btn-remove {

    flex-grow: 0;

    height: 35px;

    width: 35px;

    padding: 4px;

    margin-left: 10px;

    font-size: 16px;

    line-height: 27px;

}



/* Hauteur uniforme pour tous les éléments de formulaire */

.couleur-group select, .couleur-group .color-select, .couleur-group .pantone-input, .couleur-group .btn-remove {

    height: 40px;

}



/* S'assurer que le contenu des divs est centré */

.couleur-group .color-select, .couleur-group .pantone-input {

    display: flex;

    align-items: center;

    justify-content: center;

}



.flex-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    flex-direction: row;

    align-content: stretch;

    align-items: flex-end;}



.flex-container img {

    width: 30%; /* Définir la largeur de chaque image pour tenir trois par ligne */

    margin: 5px; /* Ajouter une petite marge entre les images */

    box-sizing: border-box;

}



input[type="radio"] {

    display: none; /* Cache les radios mais ils restent fonctionnels */

}



input[type="radio"] + img {

    cursor: pointer; /* Montre que l'image est cliquable */

}



.image-container img {

    cursor: pointer;

    border: 2px solid transparent; /* Ajoute une bordure transparente par défaut */

    transition: border 0.3s ease; /* Rend la transition de la bordure plus visible */

}



.image-container img:hover {

    border: 2px solid #ccc; /* Couleur de survol avant le clic */

}



#adr_liv_code_postal + .select2-container {

    width: 280px !important; /* Force la largeur à 100% */

}

#adr_liv_pays + .select2-container {

    width: 280px !important; /* Force la largeur à 100% */

}

.mt-3 {
    margin-top: 10px;
}

.mb-2 {
    margin-bottom: 7px;
}

.mb-3 {
    margin-bottom: 10px;
}

.mb-4 {
    margin-bottom: 13px;
}

.mb-5 {
    margin-bottom: 16px;
}

.p-0 {
    padding: 0;
}

.green-theme .button {
    background: rgba(7, 116, 80, 0.805);
    color: white;
}

.orange-theme .button {
    background: rgba(216, 113, 22, 0.85); 
    color: white;
}

.jaune-theme .button {
    background: rgb(255, 255, 107); 
    color: white;
}
#btn-client .label {
    color: rgb(58, 57, 57);
}
.jaune-theme #btn-client:hover .label {
    color: white;
}
#btn-creer-client .label {
    color: rgb(58, 57, 57); 
}
.jaune-theme #btn-creer-client:hover .label {
    color: white;
}


#btn-predevis .label {
    color: rgb(58, 57, 57);
}
.jaune-theme #btn-predevis:hover .label {
    color: white;
}
#btn-creer-predevis .label {
    color: rgb(58, 57, 57); 
}
.jaune-theme #btn-creer-predevis:hover .label {
    color: white;
}


#btn-commande .label {
    color: rgb(58, 57, 57); 
}
.jaune-theme #btn-commande:hover .label {
    color: white;
}
#btn-creer-commande .label {
    color: rgb(58, 57, 57); 
}
.jaune-theme #btn-creer-commande:hover .label {
    color: white;
}

#btn-commande-commercial .label {
    color: rgb(58, 57, 57);
}
.jaune-theme #btn-commande-commercial:hover .label {
    color: white;
}
#btn-creer-commande-commercial .label {
    color: rgb(58, 57, 57); 
}
.jaune-theme #btn-creer-commande-commercial:hover .label {
    color: white;
}

#btn-commande-achat .label {
    color: white;
}
.jaune-theme #btn-commande-achat:hover .label {
    color: white;
}
#btn-creer-commande-achat .label {
    color: white; 
}
.jaune-theme #btn-creer-commande-achat:hover .label {
    color: white;
}

#btn-expedition .label {
    color: rgb(58, 57, 57);
}
.jaune-theme #btn-expedition:hover .label {
    color: white;
}
#btn-creer-expedition .label {
    color: rgb(58, 57, 57); 
}
.jaune-theme #btn-creer-expedition:hover .label {
    color: white;
}



#btn-facturation .label {
    color: rgb(58, 57, 57);
}
.jaune-theme #btn-facturation:hover .label {
    color: white;
}
#btn-creer-facturation .label {
    color: rgb(58, 57, 57); 
}
.jaune-theme #btn-creer-facturation:hover .label {
    color: white;
}


.bleu-theme .button {
    background: rgba(38, 54, 177, 0.85); 
    color: white;
}


.button-container-accueil {
    display: flex;
    align-items: center;
    position: relative;
}



.button, .sub-button {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    padding: 1em 2.7em;
    font-weight: 500;
    border: none;
    position: relative;
    overflow: hidden;
    border-radius: 0.6em;
    cursor: pointer;
    width: 200px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, transform 0.3s, opacity 0.3s; /* Smooth transitions */
}

.button-plus {
    width: 35px; 
    height: 35px;    
    margin-left: 10px;
}

.button-plus .label, .sub-button .label {
    font-size: 24px;
}

.sub-buttons {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: visibility 0s linear 0.3s, opacity 0.3s, transform 0.3s;
}

.button-container:hover .sub-buttons {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s; /* Remove delay when showing */
}

.gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 0.6em;
    margin-top: -0.25em;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0.3)
    );
}

.label {
    position: relative;
    top: -1px;
}

.transition {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 500ms;
    background-color: #1f2937;
    border-radius: 9999px;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.button:hover .transition {
    width: 14em;
    height: 14em;
}

.button:active {
    transform: scale(0.97);
}

.graph-box {
    display: flex;
    justify-content: end;
    text-align: center;
    padding-right: 50px;
}

.empty-label {
    height: 15px;
}

@media (max-width: 768px) {
    .empty-label {
        display: none;
    }
}