@font-face {
  font-family: 'BrownBold'; /* Nom de la police */
  src: url('Brown-Bold.woff2') format('woff2'); /* Chemin vers le fichier .woff2 */
}

@font-face {
  font-family: 'BrownRegular'; /* Nom de la police */
  src: url('Brown-Regular.woff2') format('woff2'); /* Chemin vers le fichier .woff2 */
} 
  
div,p,spantable,button,a {
   font-family: 'BrownRegular'; /* Nom de la police */
} 

h1,h2,h3,h4,h5,h6,strong {
   font-family: 'BrownBold' !important; /* Nom de la police */
} 
       
.title_detail {
  color: #242323;
  font-size: 22px; 
  font-weight: 500;
  line-height: 27px;
  letter-spacing: -0.24px;
} 
   

/* Exemple de personnalisation du bouton SweetAlert */
.swal2-confirm {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
}
.swal2-cancel {
    background-color: #f44336;
    color: white;
    font-size: 16px;
}

.tabbar img {
  width: 32px; /* Ajustez la taille */
  height: 32px;
  transition: transform 0.2s ease; /* Animation au survol */
  margin-top: 6px;
}

.tabbar img:hover {
  transform: scale(1.1); /* Légère augmentation au survol */
}

   
.btn_accepter {    
    border-radius: 35px;
    background-blend-mode: normal;
    box-shadow: 0px 4px 12px rgba(112, 234, 146, 0.8);
    height: 46px;
    background: linear-gradient(225deg, #7ef092 0%, #21af90 100%);
    width: 67%;
    border: none;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.le_cfa {
  color: #ea5574;
  font-size: 27px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.47647062px;
}

.date_gombo {
  color: #9ca5bf;
  font-size: 17px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: -0.3px;
}

:checked+.tabbar__button {
    color: rgb(87 219 163);
    background-color: transparent;
    box-shadow: none;
    box-shadow: var(--tabbar-active-box-shadow);
    border-top: none;
    border-top: var(--tabbar-active-border-top);
    text-align: -webkit-center;
}
 
.dialog {
    box-sizing: border-box;
    padding: 0;
    font: inherit;
    color: inherit; 
    background: 0 0;
    border: none;
    line-height: normal;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
     font-family: 'BrownRegular'; /* Nom de la police */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: auto auto;
    overflow: hidden;
    min-width: 95%; 
    min-height: 100px;
    border-radius: 20px; 
} 
   
.btn_projet{
    margin-top: 20px;
    background: linear-gradient(225deg, #7ef092 0%, #21af90 100%);
    border-radius: 50px;
}
   
.title_bienvenu{
    text-align: center;
    font-size: 28px !important;
    color: #ffffff;
}

.minitexte_con{
    color: #ffffff;
    font-weight: 700;
    font-size: 30px;
}

.btn_login{
    background: transparent;
    color: #ffffff;
    font-weight: 900;
    font-size: 20px;
    border-radius: 40px;
    padding: 10px;
    border: solid 2px #ffffff; 
}

.btn_inscription{
    background: #ffffff;
    color: #4ad697;
    font-weight: 900;
    font-size: 20px;
    border-radius: 40px;
    padding: 10px;
    border-color: #ffffff;
}
  
.margin_app{
    margin-left: 20px;
    margin-right: 20px;
}

/* Dégradé linéaire en arrière-plan */ 
#login-page .page__background {
    background: linear-gradient(135deg, #48d595, #7eecc7); 
    height: 100%;
} 

#didacticiel .page__background {
    background: linear-gradient(135deg, #ffffff, #ffffff); 
    height: 100%;
} 

#passforget .page__background {
    background: linear-gradient(135deg, #ffffff, #ffffff); 
    height: 100%;
} 
 
#condition-page .page__background {
    background: linear-gradient(135deg, #ffffff, #ffffff); 
    height: 100%;
} 

/* Dégradé linéaire en arrière-plan */ 
#gombo .page__background {
    background: linear-gradient(to bottom, #f0f0f0 0%, #ffffff 20%);  
    height: 100%;
} 

#gombisteen {
  color: #2b7157;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.41px;
}

 
#inscription .page__background {
    background: linear-gradient(135deg, #ffffff, #ffffff); 
    height: 100%; 
}  

.text-input--material:focus {
    background-image: linear-gradient(#3d5afe, #3d5afe), linear-gradient(to top, transparent 1px, #afafaf 1px);
    background-image: linear-gradient(#53da9f, #53daa0), linear-gradient(to top, transparent 1px, var(--material-text-input-inactive-color) 1px);
    -webkit-animation: material-text-input-animate .3s forwards;
    animation: material-text-input-animate .3s forwards;
} 

#connexion .page__background {
    background: #ffffff; 
    height: 100%;
} 

.google-icon {
    font-size: 29px; /* Taille de l'icône */
    background: linear-gradient(90deg, #4285F4 25%, #EA4335 50%, #FBBC05 75%, #34A853 100%);
    -webkit-background-clip: text;
    color: transparent;
}

.btn_google{
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgb(0 0 0 / 0%);
    background: #ffffff !important;
    color: rgb(0, 0, 0);
} 

.texte_log{
    color: #9f9f9f;
    font-size: 13px;
    letter-spacing: 0.8px;
}

.title_log{
    color: #000000;
    font-size: 44px !important;
    font-weight: 500 !important;
}
 
#create_gombo .page__background {
    background: #ffffff; 
    height: 100%;
}

#tableau .page__background {
    background: #ffffff; 
    height: 100%;
}

#gombo .page__background {
    background: #ffffff; 
    height: 100%; 
}

#profil .page__background {
    background: #FFFFFF;  
    height: 100%;
} 
 
/* Style normal */
.les_centre {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

/* Style actif */
.les_centre.active {
    transform: scale(1.1); 
    background: #b9dfd4;
    box-shadow: rgb(0 0 0 / 18%) 0px 4px 8px;  
}     

.iso_bouton{
    background: linear-gradient(135deg, #48d595, #7eecc7) !important;
    padding: 6px !important;
}

.tabbar--material__border {
    height: 2px;
    background-color: #ffffff;
}

.tabbar:not(.tabbar--top) {
    padding-bottom: 0; 
    padding: 0px;
    border-top-left-radius: 30px;
    border-top-right-radius: 35px;
    box-shadow: 0px -1px 4px rgba(100, 100, 100, 0.12); 
}

.css_montant{
        text-align: center !important;
    background: linear-gradient(225deg, #7ef092 0%, #21af90 100%);
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 26px !important;
    border-color: #ffffff !important;
}  

.range--material__input {
    background-image: linear-gradient(#25b290, #73e892);
    background-position: center left;
}

.btn_seconnecter{
    background: linear-gradient(225deg, #7ef092 0%, #21af90 100%);
    padding: 8px;
    border-radius: 60px;
    font-weight: 900; 
    font-size: 14px; 
}       
.title_pass_forget{
    text-align: right;
    font-weight: 500;
    font-size: 14px;
}

 .carousel-item {
        text-align: center;
        padding: 10px;
    }
    .carousel-item img {
        width: 50px;
    }
 
.tabbar__icon+.tabbar__label {
    display: block;
    font-size: 10px;
    line-height: 1;
    margin: 0;
    font-weight: 400;
    font-weight: var(--font-weight);
    text-transform: lowercase;
}

:checked+.tabbar--material__button {
    background-color: transparent;
    color: #48d595;
} 

.rang_point{
  font-weight : bold;
  font-size : 14px;
  color : rgb(255, 255, 255);
}

.rang_point_number{
  font-weight : bold;
  font-size : 13px;
  color : rgb(255, 255, 255);
}


.title_profil_projet{
  font-weight : bold;
  font-size : 12px;
  color : #08481B; 
  color : rgb(8, 72, 27);
}

.en_cours{
  
}

.livraison{
         margin-top: 26px;
}

.like{
    
}

.etoile_profil{
    background: #08481B;
    margin-right: 120px;
    margin-left: 120px;
    font-size: 18px;
    font-weight: 900;
    border-radius: 50px;
    padding: 5px;
        margin-bottom: 10px;
}

.texte_g_r{
  font-size : 14px;
  color : rgb(128, 128, 128);
} 

.somme_rercolte{
  font-weight : bold;
  font-size : 18px;
  color : rgb(38, 38, 40);
}


.cadre_recolte{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    padding: 4px;
}

.texte_rank{
  font-weight : bold;
  font-size : 13px;
  color : rgb(71, 71, 71);
}

.cadre_competence{
    background: #DDE6ED;
    font-size: 10px;
    color: rgb(41, 47, 72);
    padding: 8px;
    border-radius: 50px;
    font-weight: 500;
    margin: 4px; 
}

.texte_profil_comp{
  font-weight : bold;
  font-size : 15px;
  color : rgb(34, 34, 34);
}


.top-toolbar_profil {
    position: fixed;
    top: 0;
    /* left: 0; */
    width: 100%;
    /* background-color: #4CAF50; */
    color: white;
    font-size: 25px;
    padding-top: 20px;
    z-index: 1000;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
    padding-bottom: 15px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
} 

.title_porte_feuille {
  color: #ffffff;
  font-size: 24px;
  font-weight: 900; 
  letter-spacing: 0.85096157px;
}

 
.top-toolbar_porte_feuille {
    position: fixed;
    top: 0;
    /* left: 0; */
    width: 100%;
    /* background-color: #4CAF50; */
    color: white;
    font-size: 25px;
    padding-top: 20px;
    z-index: 1000;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
    padding-bottom: 15px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
} 

.bg_top{
    background: linear-gradient(225deg, #7ef092 0%, #21af90 100%);
}
 
.bg_top_porte{
    background: linear-gradient(225deg, #ffffff 0%, #ffffff 100%);
}
 
.gombo_recolte{
        color: #14121e;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.32px;
}

.btn_reclamer_solde{
    width: 60%;
    border-radius: 11px;
    background: #51d99e;
    background-blend-mode: normal;
    color: #0c6242;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
}
 
.dispodispo{
    color: #8492a2;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: 10px !important;
    background: initial;
    background-color: #008f3e !important;
    color: #fff;
    font-size: 1em;
}

.swal2-styled.swal2-cancel {
    border: 0;
    border-radius: 10px !important;
    background: initial;
    background-color: #6e7881;
    color: #fff;
    font-size: 1em;
}
 
.swal2-popup {
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    width: 32em;
    max-width: 100%;
    padding: 0 0 1.25em;
    border: none;
    border-radius: 30px !important;
    background: #fff;
    color: #545454;
    font-family: inherit;
    font-size: 1rem;
}
 
.montant_portefeuille{
    color: #90c418;
    font-size: 18px;
    font-weight: 700; 
    line-height: 20px;
    text-align: right;
    letter-spacing: -0.32px;
}

.tabbar--material__button {
    background-color: transparent;
    color: #77869e;
    text-transform: uppercase;
    font-size: 14px;
     font-family: 'BrownRegular'; /* Nom de la police */
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    font-weight: var(--material-font-weight);
    text-align: -webkit-center; 
}

.bottom-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    text-align: center;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding-top: 20px; 
    padding-bottom: 20px;
}

.bienv {
  color: #3e3e3e;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.24px;
} 

.texte_slide {
    color: rgb(87, 99, 108);
    font-size: 16px;
    letter-spacing: 0px;
    text-align: center;
    line-height: 20px;
    font-weight: normal; 
}

.texte_insc {
  color: #707070;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}

.btn_slide{
    height: 70px;
    background: linear-gradient(225deg, #7ef092 0%, #21af90 100%);
    background-blend-mode: normal;
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0px 0px 16px rgba(188, 186, 206, 0.8);
    border-radius: 35px;
    border: none; 
}


.bienvsub {
    color: rgb(0, 0, 0);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.24px;
    line-height: 35.2px;
}

.texte_titre{
     margin-top: 0px;
    color: #2b7157;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.41px;;
}

.content{
    margin-top: 320px;
} 

.cadre_montant{
    padding: 10px;
    margin-bottom: -60px;
    border-radius: 20px;
    background: #ffffff;
    background-blend-mode: normal;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.05); 
}

.tabbar--material {
    background: 0 0;
    background-color: #fff;
    background-color: var(--material-tabbar-background-color);
    border-bottom-width: 0;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .14), 0 3px 5px -2px rgba(0, 0, 0, .12), 0 5px 1px -4px rgba(0, 0, 0, .2);
    border-top-left-radius: 45px;
    border-top-right-radius: 45px;
}
   
.title_solde{
        color: #77869e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1px;
}

.montant{
    color: #042c5c;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0.85096157px;  
}

.name_name{
        margin-bottom: 4px;
    color: #2b7157;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.55470586px;
}

.section_content{
    background: #ffffff;
    background-blend-mode: normal;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px; 
        padding-left: 20px;
    padding-right: 20px;
    margin-top: 26px;
    padding-top: 4px;
}

.section_content_gombo{
    background-blend-mode: normal;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px; 
        padding-left: 20px;
    padding-right: 20px;
    margin-top: 26px;
    padding-top: 4px;
}


.title_projet {
  color: #042c5c;
  font-size: 21px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.5265px;
  margin-top: 34px; 
}
 
/* Top Toolbar personnalisée */
.top-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    /*background-color: #4CAF50;*/ 
    color: white;
    font-size: 25px;   
    padding-top:20px; 
    z-index: 1000; /* S'assurer qu'elle est au-dessus du contenu */
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
    padding-bottom: 15px; 
    border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px;
} 

.btn_reclamer{  
    background: #47c5ef;
    border: none;
    width: 65%;
    padding: 10px; 
    border-radius: 11px;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgb(0 0 0 / 0%);
}

.icon_up{
    background: #e2f2eb;
    border-radius: 4px;
    padding: 4px;
}
 
.speed-dial.fab--bottom__center, button.fab--bottom__center, ons-fab.fab--bottom__center {
    top: auto;
    bottom: 38px;
    margin-left: 70px;
    left: 50%;
    right: auto; 
    position: absolute;
    position: var(--fab-position);
}

.ons-carousel-indicator {
    position: absolute;
    bottom: 100px; 
    width: 100%;
    text-align: center;
}
 
.ons-carousel-indicator span {
    width: 30px;
    height: 10px;
    margin: 5px;
    display: inline-block;
    border-radius: 10px;
    background: rgb(239 239 239);
    transition: background-color 0.3s;
}

.ons-carousel-indicator span.active {
    background-color: #42C691;
}

.lesplusapp {
  color: #8c8c8c; 
  font-size: 17px;
  font-weight: 300;
} 
 

.title_liste_gombo{
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    letter-spacing: -0.24px !important;
    margin: 5px 0 !important;
}
 
.cadre_projet{
    background: rgb(255, 255, 255);
    background-blend-mode: normal;
    padding: 8px;
    margin-top: 8px;
    border-bottom: solid 1px #efefef;
    height: 172px;
    max-height: 200px;
    border-radius: 20px; 
}
 
.lesstatut {
  border-radius: 14.5px;
  background: #47c5ef;
  background-blend-mode: normal;
      border: none;
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 700;
}

.todeliveri {
  color: #9d9d9d;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1032px;
}

.kevinBWeb {
  color: #13395f;
  font-size: 12px;
  font-weight: 500;
}
 
.title_list_projet{ 
      -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden; 
    text-overflow: ellipsis;
    color: #242323;
    font-size: 17px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.3px;
}
 
.montant_list_projet{
  color: #9ca5bf;
    font-size: 14px;
    font-weight: 300;
    line-height: 17px;
    letter-spacing: -0.41px;
    margin-top: 10px; 
}
 
.texte_list_projet {
        -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #242323;
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: -0.24px;
}
  
.status-container {
    display: flex;
    overflow-x: auto;
    background-color: rgb(255 255 255 / 10%);
    white-space: nowrap;
    border-radius: 5px;
    padding: 0px; 
}

.status {
    flex: 0 0 auto;
    text-align: center;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.3s, border 0.3s;
    font-size: 13px;
    font-weight: 500;
    color: #77869e;
}

.status:hover {
    background-color: #dff5e0;
    color: #335213; 
}
 
.status.selected {
    border-radius: 6px;
    background: rgb(223, 245, 224);
    color: #335213;
}

#custom-toolbar {
        background: linear-gradient(225deg, rgb(126, 240, 146) 0%, rgb(33, 175, 144) 100%);
    height: 60px;
    padding-top: 7px; 
}

/*FORMULAIRE CREATION GOMBO*/
.form_gombo{
    width: 100% !important;
    height: 25px;
    border-radius: 10px;
    border: solid 1px #34bc91;
    padding: 7px; 
    background: #eeeeee;
    font-size: 14px;
} 

/* Positionne les notifications Toastr au centre de l'écran */
.toast-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
}

/*Les categoriedans le form*/

.les_categorie {
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    position: relative;
    margin: 2px;
    border: solid 2px #ededed;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

button.fab, ons-fab.fab, ons-speed-dial-item.fab {
    color: #4fcf91;
    background-color: rgb(255 255 255);
}
  
/* Style actif */
.les_categorie.active {
    transform: scale(0.9);
    border: 3px solid #74b574 !important;
    background: rgba(58, 63, 73, 0)  !important;
}
 
.form-control{ 
    display: block;
    width: 91%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgb(33, 37, 41);
    appearance: none;
    background-color: rgb(255, 255, 255);
    background-clip: padding-box;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border: solid 1px #cdcdcd;
}

.label_form{
    color: #797979;
    font-size: 16px;
}
 
.mini_label{
    font-size: 12px;
    color: #adadad;
    font-style: italic;
}

/*upload form*/
.file-upload {
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.upload-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px; /* Largeur de la zone */
    height: 120px; /* Hauteur de la zone */
    border: 2px dashed #4CAF50; /* Bordure en pointillés */
    background-color: rgba(76, 175, 80, 0.1); /* Fond vert avec opacité réduite */
    color: #4CAF50; /* Couleur du texte et de l'icône */
    border-radius: 8px; /* Coins arrondis */
    cursor: pointer;
    transition: background-color 0.3s ease;
}
  
.upload-area:hover {
    background-color: rgba(76, 175, 80, 0.2); /* Changement de couleur au survol */
}
 
.upload-area i {
    font-size: 32px; /* Taille de l'icône */
    margin-bottom: 8px;
}

.upload-area p {
    font-size: 16px; /* Taille du texte */
    margin: 0;
}

/*CENTRE D4IONTERNET*/
.container {
    padding: 0px;
}

.title_bas{
    background: rgb(45 183 144 / 28%);
    margin-bottom: 0px !important;
    color: #047b59;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 12px !important;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}

.title_bas_cat{         
    margin-bottom: 0px !important;
    color: #999999;       
    font-size: 11px !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}
 
.card {
    position: relative;
    border: 1px solid #ccc; /* Bordure grise en tirets */
    border-radius: 10px; /* Coins arrondis */
    padding: 0px;
    text-align: center; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1); /* Fond vert avec opacité réduite */
}
 
.icon-container {
    background: linear-gradient(225deg, #7ef092 0%, #21af90 100%); /* Dégradé de vert */
    width: 60px;
    height: 60px; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 20px;
}
 
.icon {
    color: white; /* Icône en blanc */
    font-size: 24px;
}

.title {
    color: #32cd32; /* Titre en vert */
    margin-top: 10px;
    font-size: 18px;
} 

.checkbox {
      
    appearance: none;
    /*width: 20px;
    height: 20px;*/ 
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    /*border-width: 1px;
    border-style: solid;
    border-color: rgb(177 177 177);*/
    border-image: initial;
    /*border-radius: 50%;*/
    transition: background-color 0.2s;

}
 
.checkbox:checked {
    background-color: #000; /* Couleur de fond lorsque cochée */
}

.checkbox:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #fff; /* Couleur de la coche */
    border-radius: 50%; /* Rendre la coche ronde */
}


    .text-center {
        text-align: center;
    }
    
    .text-danger {
        color: #ff4d4f;
    }
    
    /* Conteneur général des réclamations */
    .reclamation-card {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin: 15px auto;
        padding: 20px;
        max-width: 90%;
        transition: transform 0.2s ease-in-out;
    }
    
    .reclamation-card:hover {
        transform: scale(1.02);
    }
    
    /* Header de la réclamation */
    .reclamation-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    
    .reclamation-header span {
        font-size: 16px;
        font-weight: bold;
        color: #555;
    }
    
    /* Footer de la réclamation */
    .reclamation-footer {
        font-size: 14px;
        color: #777;
        margin-top: 10px;
    }
    
    /* Bouton */
    .reclamation-button {
        display: block;
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 5px;
        background-color: #007bff;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        margin-top: 15px;
        transition: background-color 0.2s ease-in-out;
    }
    
    .reclamation-button:hover {
        background-color: #0056b3;
    }
    
    /* Couleurs spécifiques aux statuts */
    .reclamation-card.success {
        border-left: 5px solid #28a745;
    }
    
    .reclamation-card.pending {
        border-left: 5px solid #ffc107;
    }
    
    .reclamation-card.error {
        border-left: 5px solid #dc3545;
    }
    
    /* Responsive Design */
    @media (max-width: 600px) {
        .reclamation-card {
            padding: 15px;
        }
    
        .reclamation-header span {
            font-size: 14px;
        }
    
        .reclamation-footer {
            font-size: 12px;
        }
    
        .reclamation-button {
            font-size: 14px;
        }
    }

.animated-round {
  transition: all 0.3s ease;
}

.titre_insc { 
    color: rgb(20, 24, 27);
    font-size: 35px !important;
    font-weight: 600 !important;
}

.texte_ins{
    color: rgb(87, 99, 108);
    font-size: 16px;
    font-weight: normal;
}

.animated-round:focus {
  background-color: #e7f3ff; /* Changer la couleur de fond au focus */
  border-color: #007bff; /* Bordure bleu au focus */
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Ombre bleue douce */
} 

.title_type_gombo{
    font-size: 25px ;
    font-weight: 700;
}

.animated-round:hover {
  background-color: #f1f1f1; /* Changer le fond au survol */
}
 
/*Formilaire d'inscrition*/
.form-container {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* Classe spécifique pour le titre */
.form-title {
  text-align: center;
  color: #4b6e8f;
  font-size: 26px;
  margin-bottom: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Classe spécifique pour les labels */
.form-label {
  font-size: 16px;
  color: #5f6368;
  margin-bottom: 8px;
  display: block;
  font-weight: 500;
  margin-bottom: 20px;
}
 
/* Style pour les champs de saisie */
.form-input {
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 5px;
  border: 2px solid #dedede;
  border-radius: 12px;
  box-sizing: border-box;
  font-size: 16px;
  color: #333;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #5c6bc0;
  outline: none;
  background-color: #fff;
}

.input-group {
  position: relative;
}

.input-group i {
  position: absolute;
  right: 15px;
  top: 36%;
  transform: translateY(-50%);
  color: #888;
  font-size: 25px;
} 

.custom-grid ons-col {
    padding: 5px; /* Espacement interne entre colonnes */
}

.custom-grid .operator-item {
    border: 2px solid green;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    background-color: #f9f9f9;
}

.title_metier{
    color: #a9a9a9;
    font-size: 16px !important; 
    font-weight: 500;
    margin-top: 0px;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.8px; 
}
  
.operator-item.active {
    background-color: #d4edda;  /* Couleur de fond verte pour l'élément sélectionné */
    border-color: #155724;      /* Bordure verte */
}

.les_categorie.active {
    background-color: #74c1a3;  /* Couleur de fond verte pour l'élément sélectionné */
    border-color: #74c1a3;      /* Bordure verte */
}
  
.les_categorie.active h3.title_metier {
      color: #74b574;
}
  
.submit-btn {
  width: 100%;
  padding: 14px;
  background-color: #5c6bc0;
  color: #fff;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #3f51b5;
}

.submit-btn:active {
  background-color: #303f8a;
}

/* Responsive Design */
@media (max-width: 500px) {
  .form-container {
    padding: 25px;
  }
  .form-title {
    font-size: 22px;
  }
  .form-label {
    font-size: 14px;
  }
  .form-input {
    padding: 12px 18px;
  }
  .submit-btn {
    font-size: 16px;
    padding: 12px;
  }
}


.menu-container {
    max-width: 420px;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
}

.menu-section {
    margin-bottom: 20px;
}

.menu-section:last-child {
    margin-bottom: 0;
}

.menu-title {
    font-size: 20px;
    font-weight: bold;
    color: #444;
    margin-bottom: 15px;
}

.swal2-input, .swal2-file, .swal2-textarea, .swal2-select, .swal2-radio, .swal2-checkbox {
    margin-top: 1em;
    margin-right: 2em; 
    margin-bottom: 3px;
    margin-left: 0em !important;
}

.reset-button-container {
    position: fixed;
    bottom: 20px; /* Ajuste la distance du bas selon tes besoins */
    right: 20px; /* Ajuste la distance de la droite selon tes besoins */
    z-index: 1000; /* Assure-toi qu'elle est au-dessus des autres éléments */
    cursor: pointer; /* Indique que l'image est cliquable */
}
 
.reset-button-container img {
    width: 50px; /* Ajuste la taille de l'image selon tes besoins */
    height: auto;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    background: #f4f4f4;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 10px;
}

.menu-item:hover {
    background: #e6e8eb;
    transform: translateY(-3px);
}
 
.menu-icon {
    font-size: 22px;
    margin-right: 15px;
    color: #2eb890;
}

.menu-text {
    flex-grow: 1;
    font-size: 16px;
    font-weight: 500;
    color: #555;
}

.menu-divider {
    height: 2px;
    background: #e4e4e4;
    margin: 20px 0;
}

.logout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #ff5252, #ff7b7b);
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 15px;
    border: none;
    border-radius: 12px;
    transition: background 0.3s ease;
    cursor: pointer;
    width: 100%;
}

.logout-button:hover {
    background: linear-gradient(45deg, #ff3d3d, #ff6767);
}

.logout-button i {
    margin-right: 8px;
}


.edit-profile-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.edit-profile-modal .modal-content {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.edit-profile-modal .input-container {
  margin-bottom: 15px;
  text-align: left;
}

.edit-profile-modal .input-container label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.edit-profile-modal .text-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.edit-profile-modal .modal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.edit-profile-modal .button {
  width: 100%;
}

.tab-icon-active {
    display: none;
}

.tab-icon-inactive {
    display: block;
    width: 37px;
}

ons-tab[active] .tab-icon-active {
    display: block;
}

ons-tab[active] .tab-icon-inactive {
    display: none;
} 

.tabbar__button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    background: 0 0;
    border: none;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 0;
    height: 49px;
    height: var(--tabbar-button-line-height);
    letter-spacing: 0;
    color: #999;
    color: var(--tabbar-button-color);
    vertical-align: top;
    background-color: transparent;
    border-top: none;
    border-top: var(--tabbar-button-border);
    width: 100%;
    font-weight: 400;
    font-weight: var(--font-weight);
    line-height: 49px;
    line-height: var(--tabbar-button-line-height);
    text-align: -webkit-center;
}

/* Style personnalisé pour Gombo */
.gombo-container {
     font-family: 'BrownRegular'; /* Nom de la police */
    line-height: 1.6;
    margin: 20px auto;
    max-width: 800px;
    padding: 20px;
    background-color: #ffffff;
    color: #333;
    border-radius: 21px;
}

.gombo-container h1 {
    color: #007BFF;
    text-align: center;
    font-size: 24px; 
    margin-bottom: 20px;
}

.gombo-container h2 {
    color: #46c990;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.gombo-container h3 {
    color: #003f7f;
    font-size: 17px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.gombo-container p {
    margin: 10px 0;
    text-align: justify;
    font-size: 13px; 
}

.gombo-container ul {
    margin: 10px 0;
    padding-left: 20px;
}

.gombo-container ul li {
    margin-bottom: 5px;
}

.gombo-note {
    font-weight: bold;
    color: #d9534f;
}

.gombo-highlight {
    font-weight: bold;
    color: #5cb85c;
}

/*Material design input*/
/* Material Form */
input:focus ~ .focus-border,
textarea:focus ~ .focus-border {
  width: 100%;
}

.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #52d99e;
  transition: 0.4s;
}

input:focus + label,
textarea:focus + label,
input:valid + label,
textarea:valid + label {
  top: 0;
  font-size: 0.8rem;
  color: #52d99e;
}

label {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #999;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: #52d99e;
}
 
.form-group input{
  font-size: 14px;
  width: 98%;
  padding: 0.8rem 0.5rem; 
  border: none; 
  border-bottom: 2px solid #ccc;
  background: none;
  color: #333;
  outline: none;
  transition: border-color 0.3s;
}

/* Material Form */
.material-form {
  background: #fff;
  /*padding: 2rem;*/
  border-radius: 8px;
  width: 100%;
  max-width: 400px; 
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.tab-container {
    display: flex;
    justify-content: space-around;
    border-bottom: 0px solid rgb(221, 221, 221);
    padding: 0px 0px;
} 
 
.tab-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    background: rgba(58,63,73,0.17);
    background-blend-mode: normal;
    border-radius: 12px;
    margin: 5px;
    transition: all 0.3s ease;
    color: #75817d;
    font-size: 10px;
    font-weight: 600;
}

.tab-item.active {
    color: #0c6242 !important; /* Texte noir actif */
    font-weight: bold;
    border-radius: 12px;
    background: #92debd;
    background-blend-mode: normal;
} 
 
#content { 
    /*min-height: 200px;*/
    padding: 1px;
    border-width: 0px;
} 

 
.list-container {
    padding: 0px;
}

.list-item {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.list-item:hover {
    transform: translateY(-2px);
}

.icon-credit {
    font-size: 24px;
    margin-right: 12px;
    color: #28a745; /* Vert pour le crédit */
}

.list-text {
    flex-grow: 1;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.amount {
    font-size: 16px;
    font-weight: bold;
    color: #28a745;
}

.debit-container {
    padding: 0px;
}

.debit-item {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.debit-item:hover {
    transform: translateY(-2px);
}

.debit-icon {
    font-size: 24px;
    margin-right: 12px;
    color: #dc3545; /* Rouge pour le débit */
}

.debit-text {
    flex-grow: 1;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.debit-amount {
    font-size: 16px;
    font-weight: bold;
    color: #dc3545; /* Rouge pour les montants débités */
}

.paye-container {
    padding: 0px;
}

.paye-item {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.paye-item:hover {
    transform: translateY(-2px);
}

.paye-icon {
    font-size: 24px;
    margin-right: 12px;
    color: #28a745; /* Vert pour représenter un paiement réussi */
}

.paye-text {
    flex-grow: 1;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.paye-projet {
    font-size: 14px;
    color: #666;
}

.paye-amount {
    font-size: 16px;
    font-weight: bold;
    color: #28a745;
}


.encours-container {
    padding: 0px;
}

.encours-item {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.encours-item:hover {
    transform: translateY(-2px);
}

.encours-icon {
    font-size: 24px;
    margin-right: 12px;
    color: #ffc107; /* Jaune pour représenter un projet en cours */
    animation: spin 1.5s linear infinite;
}

.encours-text {
    flex-grow: 1;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.encours-projet {
    font-size: 12px;
    color: #666;
}
 
.encours-amount {
    font-size: 16px;
    font-weight: bold;
    color: #ffc107;
}

/* Animation pour l'icône de chargement */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}