.page-titles .breadcrumb li.active a {
    color: #24292d;
    font-weight: 600;
}
.float-inline-end {
    float: inline-end;
}
.bg-dark {
    background-color: #f7f7f7 !important;
}
@media screen and (max-width: 555px) {
    .nav-pills .nav-mutation {
        padding: 0.45rem 0.35rem !important;
    }
}
.dd-handle:hover {
    color: #000;
    background: #fff;
}
.dd-handle {
    color: #000000;
    background: #f1f1f1;
    border-radius: 5px;
    padding: 8px 15px;
    height: auto;
    border: 1px solid #cad833;
}
.card-title {
    color: #000;
}
.text-male {
    color: #74deff;
}
.text-female {
    color: #ff7979;
}
.chart-point .chart-point-list li {
    font-size: 17px;
}
#pie_chart {
    margin: 0 auto; /* Centre le canvas horizontalement */
    display: block; /* Assure que le canvas est un élément de bloc */
    padding: 0; /* Retire le padding par défaut */
}
.chart-point {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    padding-top: 10px;
}
#morris_donught text {
    font-family: 'poppins', sans-serif; /* Changez la police ici si nécessaire */
    font-size: 13px; /* Modifiez la taille du texte */
    font-weight: 500; /* Si vous voulez un texte en gras */
    fill: #000; /* Couleur du texte */
}
.morris_chart_height {
    width: 100%;
    height: 100%;  /* Ajuste la hauteur pour prendre toute la hauteur de la colonne */
    max-width: 100%;
    box-sizing: border-box;  /* Inclut les bordures dans le calcul de largeur */
}

@media (max-width: 768px) {
    .morris_chart_height {
        height: 150px;  /* Ajuste la hauteur pour les petits écrans */
        max-width: 100%;
    }
}

#morris_donught path {
    stroke: #fff; /* Couleur de la bordure */
    stroke-width: 2px; /* Épaisseur de la bordure */
}
.css-1qsur4s {
    text-transform: uppercase;
    color: rgb(255 255 255);
    padding: 8px 12px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255, 168, 66);
    border-image: initial;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
}
.new-badge {
    color: #fff!important;
    background: linear-gradient(-90deg, #FF0000, #EB00FF, #00A3FF, #00FF38);
    background-size: 500%;
    animation: anime 16s linear infinite;
    padding: 0px 8px!important;
}
@keyframes anime {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
#tree-simple {
    width: 100%;
    height: auto;
    overflow-x: auto;  /* Permet le défilement horizontal */
}

.custom-node {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    width: 120px;  /* Ajuste la taille des nœuds */
    position: relative;
}

.custom-node img {
    max-width: 100%;   /* L'image remplit le nœud sans dépasser */
    height: auto;
}

@media only screen and (max-width: 768px) {
    .custom-node {
        width: 90px;  /* Réduire la taille des nœuds sur mobile */
    }
}
.accordion-primary .accordion__header {
    background: #efefef;
    border-color: #efefef;
    color: #000;
    box-shadow: 0 15px 20px 0 rgb(185 185 185 / 15%);
}
.accordion-primary .accordion__header.collapsed {
    background: #efefef;
    border-color: #efefef;
    color: #000;
    box-shadow: 0 15px 20px 0 rgb(36 41 45 / 22%);
}
@media only screen and (max-width: 768px) {
    .custom-node {
        width: 90px;  /* Réduire la taille des nœuds sur mobile */
    }
}
.text-days-left {
    color: rgb(255, 168, 66);
    font-size: 32px;
}
.text-reproductions {
    color: rgb(255, 168, 66);
}
.text-rose {
    color: rgb(255 121 121);
}
.avatar-list.avatar-list-stacked .avatar:hover {
    z-index: 1;
}
.avatar-list.avatar-list-stacked .avatar {
    margin-inline-end: -13px;
    border: 0px;
}
.avatar.avatar-sm {
    height: 50px;
    width: 50px;
    font-size: 15px;
    font-weight: 500;
}
.avatar {
    height: 1.875rem;
    width: 1.875rem;
    display: inline-block;
    position: relative;
    object-fit: cover;
    border-radius: 0.5rem;
}
.stacked-2 .payment-main-bx .text-num {
    font-size: 32px;
}
.me-3 {
    margin-right: 1rem !important;
}
@media only screen and (max-width: 575px) {
    .stacked-2 .payment-main-bx .text-num {
        font-size: 1.5rem;
    }
    .card-tabs .nav-tabs .nav-link {
        padding: 8px 8px;
        font-weight: 400;
        font-size: 14px;
    }
}
@media only screen and (max-width: 1199px) {
    .stacked-2 .payment-svg {
        width: 3.4375rem;
        height: 3.4375rem;
    }
}
@media only screen and (min-width: 1600px) {
    .col-xxl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.donut-chart-sale small {
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
}
.rounded {
    border-radius: 0.5rem !important;
}
.btn-outline-primary {
    color: #1EAAE7;
    border-color: #1EAAE7;
    padding: 0.5rem;
}
.btn-outline-primary:hover {
    border-color: #148abe;
    background-color: #148abe;
}
.accordion_badge {
    padding: 0.3rem 1.3rem !important;
    border-radius: 0.500rem 2.800rem 0.4rem 0rem!important;
}
.popover-help {
    color: #000000;
    background: none;
}
.card-modal {
    margin-bottom: 1.875rem;
    background-color: #d8d8d8;
    transition: all .5s ease-in-out;
    position: relative;
    border: 0px solid transparent;
    border-radius: 1.25rem;
    height: calc(100% - 30px);
}
/* Masquer la div reptile-extra-info par défaut sur mobile */
.reptile-extra-info {
    display: none;
}

/* Quand l'accordéon est ouvert */
.collapse.show {
    display: block !important;
}
.accordion__body-2.show {
    background-color: #f9f9f9;
}

/* Ajustement du bouton Voir plus sur mobile */
.voir-plus-container {
    text-align: right;
    margin-top: 10px;
}
#noResultsAlert {
        display: none; /* Masquer par défaut */
    }
/* Assurez-vous que le conteneur du filtre est bien positionné */
#filterContainer {
    margin-top: 10px; /* Ajoutez un espace au-dessus pour le sélecteur de filtre */
}

/* Assurez-vous que l'alerte est positionnée correctement */
#noResultsAlert {
    margin-top: 10px; /* Ajoutez un espace au-dessus pour l'alerte */
}


/* MODULE POUR LES REPRODUCTIONS */
.css-kflbfi {
    margin: 12px 0px 0px 25px;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.094rem;
    font-family: Roboto;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
}
@media screen and (min-width: 956px) {
    .css-kflbfj {
        margin: 0px 0px 0px 25px;
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1rem;
        letter-spacing: 0.094rem;
        font-family: Roboto;
        color: rgb(255, 255, 255);
        text-transform: uppercase;
        display: flex;
        position: absolute;
        top: 20px;
    }
}
@media screen and (min-width: 501px) {
    .img-ponte {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
}
@media screen and (max-width: 956px) {
    .css-kflbfj {
        margin: 10px 0px 0px 5px;
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1rem;
        letter-spacing: 0.094rem;
        font-family: Roboto;
        color: rgb(0 0 0);
        text-transform: uppercase;
        display: flex;
        position: absolute;
    }
    .img-ponte {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
}
.css-1oaoilj {
    height: 140px;
    width: 4px;
    min-width: 4px;
    background: rgb(196, 196, 196);
}
.css-1oaoilh {
    height: 100px;
    width: 4px;
    min-width: 4px;
    background: rgb(196, 196, 196);
}
.css-1v159ht {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 3px;
    width: 100%;
}
.css-1v159hu {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 15px;
    width: 100%;
}
.css-1jwufkx {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.css-1lskgk8 {
    width: 60px;
    height: 60px;
    border: 1px solid rgb(0, 0, 0);
}
.css-1mrka02 {
    visibility: visible;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 85px;
    -webkit-box-pack: justify;
    justify-content: space-between;
    cursor: pointer;
}
.css-fnzs42 {
    width: 277px;
    min-width: 277px;
    height: 182px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}
.css-fnzs43 {
    width: 100px;
    min-width: 100px;
    height: 100px;
    margin: auto;
    display: contents;
}
.css-d9hkzu {
    position: absolute;
    border-radius: 4px 0px;
    background: rgb(25, 26, 31);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 20px;
}
.css-13abqzq {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    cursor: pointer;
}
.css-hqfsck {
    opacity: 0.3;
    width: 60px;
    height: 60px;
    border: 1px solid rgb(0, 0, 0);
}
.css-1qry4z3 {
    display: flex;
    flex-flow: row wrap;  /* Essaie avec row wrap plutôt que column wrap */   
    align-content: flex-start;
    max-height: 180px;
    gap: 8px;
    margin-left: 12px;
    width: 100%;
}

.css-m9g7hg {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: -30px;
    width: 100%;
}
.css-m9g7hh {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 0px;
    width: 100%;
}
.img-repro-hatch {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px!important;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}
/* RESPONSIVE POUR MOBILE */
@media screen and (min-width: 1300px) and (max-width: 1600px) {
    .no-display-phone__1qry4z3 {
        display: none !important;
    }
}
@media screen and (max-width: 400px) {
    .css-1v159hu {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        margin-top: 30px;
        width: 100%;
    }
}
@media screen and (max-width: 500px) {
    .c78gt {
        width: 70%!important;
        height: 70%!important;
        display: block!important;
        object-fit: cover!important;
        border-radius: 4px!important;
    }
    .css-1qry4z3 {
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
        max-height: 280px;
        gap: 0px;
        margin-left: 12px;
        width: 100%;
    }
}
@media screen and (max-width: 720px) {
    .btn-right-top-2 {
        position: absolute;
        top: 15px;
        right: 20px;
    }
}
@media screen and (max-width: 1300px) {
    .css-1oaoilj {
        height: 80px;
        width: 4px;
        min-width: 4px;
        background: rgb(196, 196, 196);
    }
    .css-fnzs42 {
        width: 130px;
        min-width: 86px;
        height: 82px;
        border: 1px solid rgba(255, 255, 255, 0.38);
        box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    }
    .css-1qry4z3 {
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
        max-height: 310px;
        gap: 5px;
        margin-left: 12px;
        width: 100%;
    }
    .img-repro-hatch {
        width: 60% ;
        height: 60% ;
        display: block ;
        object-fit: cover;
        border-radius: 10px ;
    }
}

/* POUR LE BLOC DE REPRODUCTION SUR L'INDEX */
.bg-label-primary {
    background-color: #e9e7fd !important;
    color: #7367f0 !important;
}
.bg-label-secondary {
    background-color: #ebebed !important;
    color: #808390 !important;
}
.bg-label-info {
    background-color: #d6f4f8 !important;
    color: #00bad1 !important;
}
.gap-2 {
    gap: .5rem !important;
}
.gap-3 {
    gap: 1rem !important;
}
.mb-1-rem {
    margin-bottom: 1rem !important;
}
.divider-2.divider-vertical-2:before {
    bottom: 50%;
    top: 0;
}
.divider-2.divider-vertical-2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: unset;
}
.divider-2 {
    display: block;
    text-align: center;
    margin: 1rem 0;
    overflow: hidden;
    white-space: nowrap;
}
.divider-2.divider-vertical-2:before, .divider-2.divider-vertical-2:after {
    content: "";
    position: absolute;
    left: 48%;
}
.divider-2.divider-vertical-2:after {
    top: 50%;
    bottom: 0;
}
.divider-2.divider-vertical-2:before, .divider-2.divider-vertical-2:after {
    content: "";
    position: absolute;
    left: 48%;
}
.divider-2.divider-vertical-2 .divider-text-2 {
    z-index: 1;
    padding: .5125rem;
}
.divider-2 .divider-text-2 {
    position: relative;
    display: inline-block;
    font-size: .9375rem;
    padding: 0rem 1rem;
    color: #444050;
}
.divider-2.divider-vertical-2 .divider-text-2 .badge-divider-bg {
    padding: .313rem .252rem;
    border-radius: 50%;
    font-size: .75rem;
    background-color: rgba(47, 43, 61, .06);
    color: #acaab1;
}
html:not([dir=rtl]) .text-end {
    text-align: right !important;
}
.badge-repro {
    --bs-badge-padding-x: 0.77em;
    --bs-badge-padding-y: 0.4235em;
    --bs-badge-font-size: 0.8667em;
    --bs-badge-font-weight: 500;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: 0.25rem;
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}
/* POUR LE BLOC DE REPRODUCTION SUR L'INDEX */









.pl-20 {
    padding-left: 20px;
}
.container-reptile-img {
    position: relative;
    display: inline-block;
}

.position-sexe-icon {
    position: absolute;
    top: -1px;
    left: 0;
    z-index: auto;
}

.sexe-small-size {
    height: 25px !important;
    width: 25px !important;
    margin: 0px;
    padding: 5px;
    border-radius: 7px 0px 10px 0px !important;
    background-color: #ffffff;
}

.img-repro-hatch {
    display: block;
    width: 90px;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10%;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #e3e3e3;
}
.select2-dropdown {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051;
}
.testimonial-one .card img {
    height: 90px;
    width: 90px;
    margin-left: auto;
    margin-bottom: 15px;
    margin-right: auto;
    border-radius: 10%;
}
.select2-container--default .select2-selection--single {
    background-color: #fbfbfb;
    border: 2px solid #686868 !important;
    color: #fff !important;
    height: 56px !important;
    border-radius: 1.25rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 52px!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 52px!important;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #6b6b6b !important;
}
.no-flex {
    display: inherit!important;
}
.p-0-75 {
    padding: 0.75rem 0.75rem!important;
}
.auth-form-2 {
    padding: 50px 50px!important;
    min-width: auto!important;
}
.img-rounded-pourcent {
    border-radius: 50%!important;
    max-width: 77%!important;
}
.pagination {
    margin-bottom: 0px!important;
}
.card {
    margin-bottom: 1.875rem;
    background-color: #fff;
    transition: all .5s ease-in-out;
    position: relative;
    border: 0px solid transparent;
    border-radius: 1.25rem;
    box-shadow: 0px 12px 23px 0px rgb(118 118 118 / 41%);
    height: calc(100% - 30px);
}
.card-tabs .nav-tabs .nav-link.active {
    background: #ddd;
    color: #636363;
}
.widget-stat {
    transition: all 0.5s;
}
.widget-stat:hover {
    background-color: #e9e9e9 !important;
}
.testimonial-one .card:hover {
    box-shadow: 0px 12px 23px 0px rgb(0 0 0 / 15%);
    background-color: #e9e9e9 !important;
}
.alert.alert-outline-success-2 {
    color: #141B22;
    border-color: #cad833;
    background: #E2E2E3;
    padding: 10px 15px 10px;
    font-size: 13px;
}
.alert.alert-outline-secondary {
    background: transparent;
    color: #24292d;
    border-color: #A02CFA;
    background: #a02cfa1f;
}
.alert.alert-outline-danger {
    background: transparent;
    color: #F94687;
    border-color: #F94687;
    background: #fa2c2c1f;
}
.alert.alert-outline-yellow {
    background: transparent;
    color: #ffd74a;
    border-color: #ffd74a;
}
.btn-right-top-reptiles {
    position: absolute;
    top: 15px;
    right: 20px;
}
.widget-media .timeline li:last-child .timeline-panel {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 15px;
}
.morris-hover {
    position: absolute;
    z-index: 1;
    background: #40af8f;
    color: #fff;
}
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .copyright, [data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .btn-main-header {
    display: none;
}
.float-inline-start {
    float: inline-start!important;
}

.scanner-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Empêche le débordement de l'effet */
}

.scanner-effect {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, rgba(1, 220, 186, 0.3), rgba(7, 172, 186, 0.3));
    animation: scanner 6s infinite linear;
    z-index: 1; /* Assurez-vous que l'effet est au-dessus du graphique */
    pointer-events: none; /* Assurez-vous que l'effet ne bloque pas les interactions */
}

@keyframes scanner {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

#chartBar_pesee {
    position: relative; /* Assurez-vous que le graphique est positionné correctement */
    z-index: 0; /* Le graphique doit être derrière l'effet de scan */
    background: transparent;
}

/* Bouton scanner info */
.scanner-button {
    display: inline-block;
    padding: 0.938rem 1.5rem;
    font-size: 16px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    background: linear-gradient(to right, #01dcba, #0acfbb);
    border: none;
    border-radius: 1.25rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.scanner-button:hover {
    color: #24292d !important;
    text-decoration: none;
}

.scanner-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%; /* Commencer à gauche */
    width: 200%; /* Double de la largeur pour le mouvement gauche-droite */
    height: 100%;
    background: linear-gradient(to right, #01dcba, #7f30cb);
    animation: scanner 6s infinite linear;
    z-index: -1;
}

@keyframes scanner {
    0% {
        transform: translateX(0); /* Début du mouvement */
    }
    50% {
        transform: translateX(100%); /* Fin du mouvement à droite */
    }
    100% {
        transform: translateX(0); /* Retour au début */
    }
}
/* Bouton scanner info */
/* Bouton scanner warning */
.scanner-button-warning {
    display: inline-block;
    padding: 0.938rem 1.5rem;
    font-size: 16px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    background: linear-gradient(to right, #e3c11a, #ffd403);
    border: none;
    border-radius: 1.25rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.scanner-button-warning:hover {
    color: #515151 !important;
    text-decoration: none;
}

.scanner-button-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: -64%;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, #f1cd1e, #fbbb05);
    animation: scanner-warning 18s infinite cubic-bezier(0.18, 0.89, 0.32, 1.28);
    z-index: -1;
}

@keyframes scanner-warning {
    0% {
        transform: translateX(0); /* Début du mouvement */
    }
    50% {
        transform: translateX(100%); /* Fin du mouvement à droite */
    }
    100% {
        transform: translateX(0); /* Retour au début */
    }
}
/* Bouton scanner warning */
/* Badge span */
.badge-span-new {
    color: #24292d !important;
    display: inline-block;
    padding: 0px 8px!important;
    font-size: 14px; /* Ajuste la taille de la police */
    font-weight: 500;
    color: white;
    background: linear-gradient(to right, #b0d833, #cad833);
    border: none;
    border-radius: 0.25rem; /* Garde le même rayon de bordure */
    position: relative;
    overflow: hidden;
    z-index: 0;
    border-color: transparent;
    border: none;
    margin: 0px 0px -4px 3px !important;
}

.badge-span-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%; /* Commencer à gauche */
    width: 200%; /* Double de la largeur pour le mouvement gauche-droite */
    height: 100%;
    background: linear-gradient(to right, #a4d833, #6cd833);
    animation: badge-scanner 6s infinite linear;
    z-index: -1;
}

@keyframes badge-scanner {
    0% {
        transform: translateX(0); /* Début du mouvement */
    }
    50% {
        transform: translateX(100%); /* Fin du mouvement à droite */
    }
    100% {
        transform: translateX(0); /* Retour au début */
    }
}
.bgl-cart {
    background: #27272700;
    border-color: #e9ebd600;
}
.bg-green {
    color: #fff !important;
    background: linear-gradient(223deg, rgb(202 216 51) 0%, rgb(99 216 51) 100%)!important;
    border: none;
}
.badge-vimeo {
    background: #1ab7ea;
    border-color: #1ab7ea;
    color: #fff;
}
.badge-vimeo:hover {
    background: #1295bf;
    color: #fff;
    border-color: #1295bf;
}
.card-title {
    text-transform: none!important;
}
.bloc-compteur {
    height: 76px;
    min-width: 76px;
    width: 76px;
    font-weight: 600;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
    line-height: 20px;
    text-align: center;
    border-radius: 1.25rem;
}
.w-50 {
    width: 50px!important;
}
.h-50 {
    height: 50px!important;
}
.light.badge-inactif {
    background-color: #fff3f7;
    color: #F94687;
}
.light.badge-actif {
    background-color: #e3f9e9;
    color: #2BC155;
}
.overlay-box:after {
    background: #3f3f3f;
}
.hidden {
    display: none !important;
}
.checkbox-danger .custom-control-label::before {
    background-color: transparent;
    border-color: #999999;
}
.toggle-switch .custom-control-input:checked ~ .custom-control-label:after {
    left: -43px;
    background: #bed33e !important;
}
.toggle-switch .custom-control-input:checked ~ .custom-control-label:before {
    background: #5f5f5f52;
}
.list-group-item {
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid #e1e1e1;
    padding: 1rem 1.5rem;
    border-radius: 0;
}
.bg-progradient {
    background-image: linear-gradient(to right, #009d5b 0%, rgb(0 128 74) 51%, #00a15d 87%);
    cursor: pointer;
}
.accordion-solid-bg .accordion__header {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-color: #cad833;
    border-bottom-right-radius: 0;
    background-color: #cad833 !important;
    color: #000 !important;
    font-weight: 400;
    font-size: 16px;
}
.accordion-solid-bg .accordion__body {
    border-color: transparent;
    background-color: #f4f5f9!important;
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}
.manage-project:after {
    position: absolute;
    content: "";
    background-image: url(../images/menus/ellipse2.png);
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 35% 75%;
    z-index: -1; /* Placez l'image de fond en arrière-plan */
}
.sk-three-bounce {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #24292d!important;
}
.sk-three-bounce .sk-child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: linear-gradient(223deg, rgb(202 216 51) 0%, rgb(99 216 51) 100%)!important;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.bg-info-progressbar {
    background-color: #1EA7C5 !important;
}
.bg-success-progressbar {
    background-color: #7ed833;
}
.bgl-primary {
    background: #e3f9e9;
    border-color: #e3f9e9;
}
.plan-list .list-row .play-button {
    color: #24292d!important;
}
.display-none {
    display: none!important;
}
.width-auto {
    width: auto!important;
}
.display-none-flex {
    display: none !important;
    flex: 0 !important;
}

.visible-flex {
    display: flex !important;
}
.error-page h4 {
    color: #2eb872!important;
}
.error-page .error-text {
    color: #2eb872!important;
}
.chatbox .user_info span {
    white-space: normal!important;
}
.form-wizard .nav-wizard li .nav-link.done:after {
    background: #c2d439!important;
}
.form-wizard .nav-wizard li .nav-link.done span {
    background-color: #c2d439!important;
    color: #24292d!important;
}
.form-wizard .nav-wizard li .nav-link span {
    border: 2px solid #c2d439!important;
}
.sw-theme-default {
    border: none!important;
}
.rounded-qr-codes {
    border-radius: 10% !important;
    overflow: hidden;
    width: 80px;
    height: 80px;
}
@media (max-width: 575.98px) {
    .btn-right-top-2 {
        position: absolute;
        top: 15px;
        right: 20px;
    }
    .btn-xxs-mobile {
        font-size: 10px !important;
        padding: 7px 6px !important;
    }
    .table-responsive-sm {
        display: table!important;
        width: 100%;
        overflow-x: auto;
        min-width: 20rem !important;
    }
}
.no-br {
    border-radius: 0px!important;
}
.pagination-container {
    max-width: 100%; /* Ajustez selon la largeur de votre conteneur */
    overflow-x: auto; /* Permettre le défilement horizontal si nécessaire */
    white-space: nowrap; /* Garder les liens de pagination sur une seule ligne */
}
.badge-sm {
    line-height: 2.5!important;
}
.border-bottom {
    border-bottom: 3px solid #494949 !important;
}
.las-btn {
    font-size: 24px; /* Taille de l'icône */
    font-weight: bold; 
}
.text-green {
    color: #cad833!important;
}
#countdown {
  color: #ffffff; /* Couleur du texte */
  text-align: center;
  margin-top: 20px;
}

#time {
  display: flex;
  justify-content: center;
  font-size: 50px; /* Taille du texte du compteur */
}

.time-section {
  margin: 0 10px; /* Réduire l'espace autour des sections pour économiser de l'espace */
  text-align: center;
}

.time-section p {
  margin: 0;
  font-size: 20px; /* Taille du texte plus petite pour les unités */
}

.time-section span {
  display: block;
  font-size: 25px; /* Taille du texte du compteur un peu réduite */
}

/* Media Queries pour les écrans de tablette et mobile */
@media (max-width: 768px) {
  #time {
    font-size: 30px; /* Taille du texte réduite pour les tablettes */
  }

  .time-section span {
    font-size: 28px; /* Taille du texte du compteur réduite pour les tablettes */
  }
}

/* Media Queries pour les écrans de téléphone */
@media (max-width: 480px) {
  #time {
    font-size: 20px; /* Taille du texte réduite encore plus pour les téléphones */
  }

  .time-section {
    margin: 0 5px; /* Marges réduites pour les téléphones */
  }

  .time-section span {
    font-size: 18px; /* Taille du texte du compteur réduite encore plus pour les téléphones */
  }

  .time-section p {
    font-size: 12px; /* Taille du texte des unités réduite pour les téléphones */
  }
}

.btn-555 {
    box-shadow: none !important;
    color: #000000!important;
    cursor: initial!important;
}

@media only screen and (max-width: 555px){
    .btn-555 {
        padding: auto!important;
        font-size: auto!important;
    }
}

@media only screen and (max-width: 1400px){
    .h-38 {
        height: 38px!important;
    }
    .btn {
        padding: 0.525rem 0.725rem;
        font-size: 0.813rem;
    }
}
.pagination-success .page-item .page-link {
    color: #2eb872;
    background: #e3f9e9;
    border: #e3f9e9;
}
.pagination-success .page-item:hover .page-link, .pagination-success .page-item.active .page-link {
    background: #2eb872;
    border-color: #2eb872;
    box-shadow: 0 0px 0px 0px rgba(11, 42, 151, 0.2);
}
.pagination.no-bg.pagination-success li:not(.page-indicator):not(.active):hover .page-link {
    background: #2eb872;
    border-color: #2eb872;
    color: #fff;
}
#map {
    height: 400px; /* ou toute autre hauteur */
    width: 100%; /* généralement on veut que la largeur soit de 100% du conteneur parent */
    position: relative; /* position relative pour que la carte soit positionnée correctement à l'intérieur */
}
.aerial-view-media {
  object-fit: contain;
  height: 100%;
  width: 100%;
}
.container-register {
  overflow: initial!important;
}
.container {
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 780px;
  max-width: 780px;
}
.content-body .container-fluid, .content-body .container-sm, .content-body .container-md, .content-body .container-lg, .content-body .container-xl {
    padding-top: 25px!important;
}
.wallpaper-body-login {
    position: relative;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    text-align: left;
    background-color: #000; /* couleur de fallback */
    overflow: hidden;
}

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.video-background video {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    filter: brightness(0.5); /* pour assombrir un peu si besoin */
}
.wallpaper-body-qr-code {
    margin: 0;
    color: #24292d;
    text-align: left;
    background-color: #282828;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://www.reptitracker.fr/dashboard/images/front_3-promo-1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.authincation-content-qr-code {
    color: #24292d;
    background: #fff;
    box-shadow: 0 0 35px 0 rgb(53 53 53 / 29%);
    border-radius: 25px;
}
.authincation-content-qr-code h4 {
    color: #24292d;
}
.checkbox-high-priority {
    color: red; /* Changer la couleur de la checkbox pour haute priorité */
}

.checkbox-medium-priority {
    color: orange; /* Changer la couleur de la checkbox pour moyenne priorité */
}

.checkbox-low-priority {
    color: green; /* Changer la couleur de la checkbox pour basse priorité */
}

.p-1 {
    padding: 1rem!important;
}
@media only screen and (max-width: 575px){
    .auth-form {
        padding: 40px 30px!important;
    }
    .p-1-mobile {
        padding: 1px!important;
    }
}
.alert-dark {
    background: #f1f1f1;
    border-color: #f1f1f1;
    color: #24292d!important;
}
.widget-stat .media .media-body p {
    color: #24292d;
}
.surbrillance-forfait {
    box-shadow: 0 15px 20px 0 rgb(192 212 59)!important;
}
.w-100-carousel {
    width: 100% !important;
}
.custom-file-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-primary {
    color: #2eb872 !important;
}
/* Personnalise toute la barre de défilement */
::-webkit-scrollbar {
  width: 7px; /* Largeur de la barre de défilement */
}

/* Personnalise le fond de la piste de défilement (la partie que la barre de défilement parcourt) */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* Couleur de fond */
}

/* Personnalise la barre de défilement elle-même (le thumb) */
::-webkit-scrollbar-thumb {
  background: #888; /* Couleur de la barre de défilement */
}

/* Personnalise la barre de défilement lors du survol ou du clic */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* Couleur de la barre de défilement au survol */
}

.profile-photo {
  position: relative;
  display: inline-block; /* Assurez-vous que le parent est inline-block ou block */
}

.btn-edit-profile {
  position: absolute;
  bottom: 0;
  right: 0;
  border: none;
  background-color: #fff;
  padding: 5px;
  cursor: pointer;
  border-radius: 50% !important;
  overflow: hidden;
  width: 34px;
  height: 34px;
}
.activity-icon {
    fill: #fff;
}
.icon-svg-white {
    fill: #141B22;
}
.btn-edit-profile:focus {
  outline: none;
}
#fs-14 {
    font-size: 14px!important;
}
.margin-auto {
    margin: auto;
}
/* Exemple de stylisation pour les labels Chartist.js */
.icon-svg-header {
    fill: #24292d!important;
}
#morris_donught text {
    font-size: 16px !important; /* Utilisez la taille de police que vous souhaitez */
}
.card-body-custom {
    padding: 0.875rem!important;
}
.no-border {
    border: none!important;
}
.txt-green {
    background-image: linear-gradient(223deg, rgb(42, 217, 91) 0%, rgb(41, 165, 76) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.txt-yellow {
    background-image: linear-gradient(223deg, rgb(255 188 17) 0%, rgb(245 122 102) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.txt-red {
    background-image: linear-gradient(223deg, rgb(249 70 70) 0%, rgb(255 106 35) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ct-chart .ct-label {
    fill: #000;
    background-color: #fff;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 1.25rem;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid transparent;
}
.float-right {
    float: right!important;
    margin: auto;
    margin-right: 0px;
}
.nav-header .brand-title {
    margin-left: 10px;
    max-width: 150px;
    margin-top: 0px;
}
.div-simple-module {
    margin-bottom: -45px!important;
    margin-top: -50px;
}
.custom-file-label::after {
    content: attr(data-after-text); /* Utilisation de l'attribut data pour stocker le texte */
}
.mb-3 {
    margin-bottom: 3px!important;
}
.mb-20 {
    margin-bottom: 20px!important;
}
.p-15 {
    padding: 15px;
}
.no-pb {
    padding-bottom: 0px!important;
}
.no-pt {
    padding-top: 0px!important;
}
.no-pl {
    padding-left: 0px!important;
}
.no-pr {
    padding-right: 0px!important;
}
.no-ml {
    margin-left: 0px!important;
}
.no-mr {
    margin-right: 0px!important;
}
.no-mt {
    margin-top: 0px!important;
}
.mt-8 {
    margin-top: 8px!important
}
.mt-10 {
    margin-top: 10px!important;
}
.mt-13 {
    margin-top: 13px!important;
}
.mr-5 {
    margin-right: 5px!important;
}
.mr-10 {
    margin-right: 10px!important;
}
.pb-10 {
    padding-bottom: 10px!important;
}
.pb-15 {
    padding-bottom: 15px!important;
}
.pb-24 {
    padding-bottom: 24px!important;
}
.mt--20 {
    margin-top: -20px!important;
}
.pt-10 {
    padding-top: 10px!important;
}
.pt-20 {
    padding-top: 20px!important;
}
.pt-22 {
    padding-top: 22px!important;
}
.pt-50 {
    padding-top: 50px!important;
}
[data-headerbg="color_1"] .nav-header .hamburger.is-active .line, [data-headerbg="color_1"] .nav-header .hamburger .line {
    background: #cad833 !important;
}

[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .nav-header .nav-control .hamburger .line {
    background-color: #2eb872 !important;
}

.deznav .metismenu > li:hover > a, .deznav .metismenu > li:focus > a {
    color: #2eb872;
}

.title-2 {
    font-size: 13px!important;
}
.fs-10 {
    font-size: 10px!important;
}
.fs-11 {
    font-size: 11px!important;
}
.fs-13 {
    font-size: 13px!important;
}
.fs-14 {
    font-size: 14px!important;
}
.fs-15 {
    font-size: 15px!important;
}
.fs-22 {
    font-size: 22px!important;
}
.badge-rounded {
    border-radius: 20px;
    padding: 3px 13px;
    font-size: 10px;
}
.pr-repas {
    padding: 0.3rem!important;
    margin: 20px 20px 20px 20px!important;
}
.bg-magic {
    background: linear-gradient(70deg, #dd9934, #ff2424);
}
.text-magic {
    color: #f44929!important;
}
.text-black {
    color: #000!important;
}
.text-yellow {
    color: #ffdc31 !important;
}
.bg-yellow {
    background-color: #ffdc31 !important;
}
.bg-blue-rain {
    background-color: #2b9ec1 !important;
}
.bgl-blue-rain {
    background-color: #2b9ec1 !important;
}
.btn-black {
    background: #000000;
    border-color: #B1B1B1;
    color: #fff;
}
.notification_dropdown .dropdown-menu-right {
    min-width: 310px;
    top: 100%;
}
.no-p {
    padding: 0rem!important;
}
@media (min-width: 992px){
    .plan-list .list-row .btn-green {
        background: linear-gradient(223deg, rgb(202 216 51) 0%, rgb(99 216 51) 100%);
        margin-left: auto;
    }
    .email-left-box {
        width: 17rem!important;
    }
    .email-right-box {
        padding-left: 17rem;
        adding-left: 16rem;
        padding-right: 0rem;
    }
}
.photo-message {
    background: #a4e3f1;
    color: #1EA7C5;
}
.photo-message {
    width: 50px;
    height: 50px;
    background: #eee;
    border-radius: 1.25rem;
    overflow: hidden;
    font-size: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    align-self: start;
}
.pt-1 {
    padding-top: 1rem!important;
}
@media screen and (max-width: 1400px){
    .btn-observations {
        position: absolute;
        padding: 0rem 0rem 8rem 11.7rem;
    }
    .btn-right-top-reptiles {
        position: initial!important;
        top: 15px;
        right: 20px;
    }
}
@media screen and (max-width: 1050px){
    .btn-observations {
        position: absolute;
        padding: 0rem 0rem 7rem 18.7rem;
    }
}
@media screen and (max-width: 555px){
    .pb-20-mobile {
        padding-bottom: 20px;
    }
    .btn-observations {
        position: absolute;
        padding: 0rem 0rem 4rem 18.7rem;
    }
    .responsive-svg {
        /* styles pour la taille de l'image SVG sur les écrans mobiles */
        width: 20px; /* ajustez cette valeur selon vos besoins */
        height: auto; /* pour conserver les proportions de l'image */
      }
    .btn-responsive {
        width: 38px;
        height: 38px;
        padding: 0px;
    }
    .nav-link {
        font-size: 11px!important;
    }
    .card-header-responsive {
        padding-left: 4px!important;
        padding-right: 4px!important;
    }
    .nav-pills .nav-link {
        padding: 0.45rem 0.55rem;
    }
}
@media screen and (max-width: 430px){
.btn-observations {
    padding: 0rem 0rem 7.7rem 11.2rem;
}
}
@media screen and (max-width: 500px){
.btn-observations {
    position: absolute;
}
.no-dsp-at-mobile {
    display: none!important;
}
.resp-txt {
    font-size: 14px!important;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 295px!important;
}
}
@media only screen and (min-width: 768px){
    [data-sidebar-style="mini"][data-layout="vertical"] .deznav .metismenu > li.mm-active > a {
        background: #e3f9e9;
        color: #fff;
        border-radius: 1.25rem;
    }
    [data-sidebar-style="mini"][data-layout="vertical"] .deznav .metismenu > li:hover > a {
        background: #e3f9e9;
        color: #fff;
        border-radius: 1.25rem;
        position: unset;
    }
}
@media screen and (max-width: 375px){
.btn-observations {
    position: absolute;
    padding: 0rem 0rem 6.7rem 9.2rem;
}
}
.full-width {
    width: 100%;
}
.plan-list .list-row {
    border-radius: 1.25rem;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
    background: #f9f9f9;
}
.card-tabs .nav-tabs {
    background: #f9f9f9;
}
.header-right .notification_dropdown .nav-link {
    border-radius: 0.5rem;
}
.badge {
    line-height: 1.5;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1.4;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
@media only screen and (max-width: 1400px){
.mt-0 {
    margin-top : 0px!important;
}
.plan-list .list-row .more-button {
    height: 40px;
    width: 40px;
    line-height: 40px;
    margin-left: 120px;
    margin-top: 25px;
}
}
.dropdown-menu .dropdown-item {
    font-size: 16px;
    color: #7e7e7e;
    padding: 0.5rem 1.75rem;
    cursor: pointer;
}
.alert {
    border-radius: 1.25rem;
    padding: 15px;
}
.mb-5 {
    margin-bottom: 5px!important;
}
.mb-13 {
    margin-bottom: 13px!important;
}
.form-no-m {
    margin-bottom: 0px!important;
}
.overlay-box-aliments:after {
    background: #ff3282;
}
.badge-cliquable {
    cursor: pointer;
}
.popover-header-c {
    background: linear-gradient(223deg, rgb(201 34 139) 0%, rgb(250 49 131) 100%)!important;
}
.accordion__header--secondary {
    border: 1px solid #a02cfa;
    background-color: #A02CFA!important;
    color: #fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #2eb872 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    background: #2eb872 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #000 !important;
}
.mb-9rem {
    margin-bottom: 0.9rem;
}
.btn-right {
    float: right;
}
.input-group-text {
    background: #686868!important;
    color: #ffffff!important;
}
.input-success {
    background: linear-gradient(223deg, rgb(42 215 90) 0%, rgb(69 203 133) 100%)!important;
    border-radius: 1.25rem;
}
.form-control:disabled, .form-control[readonly] {
    background: #dbdbdb!important;
}
.img-reptiles {
    width: 75px;
    height: 75px;
    border-radius: 1.25rem!important;
    object-fit: cover;
}
.img-reptiles:hover {
    opacity: 0.5;
}
.light.badge-danger {
    background-color: #fff3f7;
    color: #fff;
}
.plan-list .list-row:hover {
    background: #40af8f;
}

.bgl-green {
    background: #e3f9e9;
    border-color: #e3f9e9;
}
.bgl-orange {
    background: #ffaa77;
    border-color: #ffaa77;
}
.bgl-dark {
    background: #f5f5f5;
    border-color: #f5f5f5;
}
.bgl-dark-2 {
    background: #f5f5f5;
    border-color: #f5f5f5;
}
.text-danger {
    color: #f94646 !important;
}
.alert.alert-danger.solid {
    background: #f94646;
    color: #fff;
    border-color: transparent;
    border: none;
}
.chatbox .nav {
    background: #2eb872!important;
}
.text-black-2 {
    color: #000 !important;
}
.text-black-3 {
    color: #000 !important;
}
.text-black-2:hover {
    color: #2eb872 !important;
}
.btn-primary {
    background: linear-gradient(223deg, rgb(42 217 91) 0%, rgb(41 165 76) 100%);
    border: none;
}
.btn-primary:hover {
    background: linear-gradient(223deg, rgb(45 187 84) 0%, rgb(42 217 91) 100%);
    border: none;
}
.plan-list .list-row .btn-green {
    background: linear-gradient(223deg, rgb(202 216 51) 0%, rgb(99 216 51) 100%);
}
.plan-list .list-row .btn-green:hover {
    background: linear-gradient(223deg, rgb(45 187 84) 0%, rgb(42 217 91) 100%);
    border: none;
}
.btn-cart {
    background-color: #f2e40e4f;
    background-image: conic-gradient(from 1turn, rgb(241 240 17), rgb(248 174 4));
    border-color: transparent;
    border: none;
}
.btn-cart:hover  {
    color: #373737!important;
    background-image: conic-gradient(from 1turn, rgb(248 179 5), rgb(241 238 16));
    border: none;
}
.btn-success-index {
    background-color: #2BC155;
    border-color: transparent;
    border: none;
}
.btn-success-index:hover {
    background: linear-gradient(223deg, rgb(249 249 249) 0%, rgb(217 217 217) 100%);
    border-color: transparent;
    border: none;
    color: #24292d!important;
}
.btn-green {
    color: #fff!important;
    background: linear-gradient(223deg, rgb(202 216 51) 0%, rgb(99 216 51) 100%);
    border: none;
}
.badge-green {
    color: #fff !important;
    background-color: #4bca6f;
    border: none;
    cursor: initial !important;
}
.btn-green:hover {
    color: #fff!important;
    background: linear-gradient(223deg, rgb(45 187 84) 0%, rgb(42 217 91) 100%);
    border: none;
}
.btn-danger {
    color: #fff;
    background-color: #f94646;
    border-color: #f94646;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #2eb872;
    border-color: #2eb872;
}
.btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: #2eb872;
    border-color: #2eb872;
    box-shadow: 0 0 0 0.2rem rgb(48 74 167 / 50%);
}
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li.mm-active > a {
    color: #2eb872;
    background: rgb(227 249 233);
}
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li > a:before {
    height: 100%;
    position: absolute;
    border-radius: 4px;
    width: 6px;
    background: #2bc055;
    top: 0;
    right: 0;
    opacity: 0;
    content: "";
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li.mm-active > a i {
    color: #212529;
}
.deznav .metismenu ul a:hover, .deznav .metismenu ul a:focus, .deznav .metismenu ul a.mm-active {
    text-decoration: none;
    color: #2bc055;
}
.date-icon {
    height: 60px;
    width: 60px;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    color: #2eb872;
    background: rgb(227 249 233);
    border-radius: 1.25rem;
}
.cm-content-box .cm-content-body {
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
    border-top: 1px solid #E6E6E6;
}
.publish-content ul {
    padding: 0.625rem;
}
.cm-content-box .content-title {
    border-top-left-radius: 0.425rem;
    border-top-right-radius: 0.425rem;
}
.cm-content-box .content-title {
    padding: 0.5rem 1.875rem;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active {
    color: #cad833 !important;
    background: #f3f3f3 !important;
}
.custom-select:focus {
    box-shadow: none;
    border-color: #57ae11!important;
    color: #278832!important;
}
.deznav .metismenu > li.mm-active > a {
    color: #2bc255;
}
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .deznav .metismenu > li.mm-active > a {
    background: linear-gradient(223deg, rgb(42 217 91 / 50%) 0%, rgb(43 193 85 / 50%) 100%);
    border-radius: 1.25rem;
    color: #2eb872;
}
[data-sidebar-style="full"][data-layout="vertical"] .menu-toggle .deznav .metismenu > li:hover > a {
    border-radius: 1.25rem;
    background: linear-gradient(223deg, rgb(42 217 91 / 50%) 0%, rgb(43 193 85 / 50%) 100%);
    color: #fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #fff !important;
    background: #ffffff00 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    color: #7e7e7e !important;
}
/* Style par défaut de la balise <a> et de ses enfants */
.btn-header {
    color: #333; /* Couleur par défaut du texte */
    text-decoration: none; /* Supprime le soulignement par défaut */
    transition: color 0.3s ease;
}
/* Changement de couleur au survol */
.btn-header:hover {
    color: #2eb872; /* Couleur du texte au survol */
}

.btn-header:hover .icon-svg {
    fill: #2eb872; /* Couleur de l'icône SVG au survol */
}
.btn-header:active .icon-svg {
    fill: #2eb872; /* Couleur de l'icône SVG au survol */
}
.icon-svg {
    fill: #7e7e7e;
    transition: color 0.3s ease;
}
.icon-svg:hover {
    fill: #2eb872;
}
.dataTable {
    width: 100%!important;
}
.notification_dropdown .dropdown-menu-right .all-notification {
    text-decoration: none;
}
.no-mb {
    margin-bottom: 0px!important;
}
.mb-5-rem {
    margin-bottom: 5rem!important;
}
.nav-pills.light .nav-link.active, .nav-pills.light .show > .nav-link {
    background: #e3f9e9;
    color: #2eb872;
    box-shadow: none;
}
a:hover {
    color: #2eb872;
    text-decoration: none;
}
.custom-notif {
    max-height: 390px;
    overflow-y: scroll;
}
.btn-icon {
    padding: 0.700rem 1.000rem;
    font-size: 20px;
}
.accordion-secondary-solid .accordion__header.collapsed {
    background: #a02cfa1f;
    color: #211c37;
    box-shadow: none;
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}
.accordion-secondary-solid .accordion__header {
    background: #a02cfa;
    border-color: #a02cfa;
    color: #fff;
    box-shadow: 0 -10px 20px 0 rgb(160 44 250 / 35%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.accordion-secondary-solid .accordion__body {
    border: 2px solid #a02cfa;
    border-top: none;
    box-shadow: 0 15px 20px 0 rgb(160 44 250 / 25%);
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}
.accordion-info-solid .accordion__header {
    background: #1ea7c5;
    border-color: #1ea7c5;
    color: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 -10px 20px 0 rgb(30 167 197 / 35%);
}
.accordion-info-solid .accordion__body {
    border: 2px solid #1ea7c5;
    border-top: none;
    box-shadow: 0 -10px 20px 0 rgb(30 167 197 / 31%);
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 360px;
}
.alert-index {
    padding-top: 5px;
    padding-bottom: 5px;
}
.chatbox .chat-list-header a {
    text-align: center;
    width: auto!important;
    height: auto;
    border-radius: 6px!important;
    line-height: normal;
    display: block;
    background: linear-gradient(223deg, rgb(26 147 173) 0%, rgb(77 1 157) 100%);
}
.display-flex {
    display: flex!important;
}
.activity-header h4 {
    margin-right: auto;
}
.activity-header:after {
    content: "";
    display: table;
    clear: both;
}
.rounded-circle {
    border-radius: 50% !important;
    overflow: hidden;
    width: 110px;
    height: 100px;
}
.rounded-circle_habitats {
    border-radius: 50% !important;
    overflow: hidden;
    width: 30px;
    height: 30px;
}
.rounded-circle_all_users {
    border-radius: 50% !important;
    overflow: hidden;
    width: 45px;
    height: 45px;
}
.rounded-circle_aliments {
    border-radius: 50% !important;
    overflow: hidden;
    width: 80px;
    height: 80px;
}
.alert-mini {
    padding: 0rem 0rem 0rem 0rem;
    font-size: 13px;
    max-width: 125px;
    margin: auto;
    margin-bottom: 15px;
}
.button-new {
  color: #fff;
  font-weight: 400;
  border-radius: 8px;
  height: 32px;
  min-width: 12px;
  background: rgb(7,73,69);
  background: linear-gradient(32deg, rgb(22 126 120) 0%, rgb(56 59 141) 26%, rgb(111 33 120) 50%, rgb(185 16 32) 100%);
  transition: 0.2s;
}

.button-new:hover {
  color: #fff;
  background-color: #333333;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}
.disabled-div {
  background-color: #ccc; /* Couleur de fond grise */
  opacity: 0.6; /* Opacité réduite pour un aspect désactivé */
  pointer-events: none; /* Empêche les interactions de la souris */
  filter: grayscale(100%); /* Grisaille le contenu (pour les images, etc.) */
  /* Autres styles de mise en forme (marges, rembourrages, bordures, etc.) */
}
.disabled-button {
    background-color: #ccc;
    opacity: 1.6;
    pointer-events: none;
    filter: grayscale(100%);
    border: 0px;
}
.alert-infos-remplis {
    background: #1ea7c5!important;
    border-color: transparent;
    border: none;
}
.btn-info-transf {
    color: #1ea7c5!important;
    background-color: #f9f9f9!important;
    border-color: transparent;
    border: none;
}
.btn-info-transf:hover {
    color: #1ea7c5!important;
    background-color: #13798f!important;
    border-color: transparent;
    border: none;
}
.btn-orange {
    color: white!important;
    background-color: #FF9800!important;
    border-color: transparent;
    border: none;
    transition: 0.3s;
}
.btn-orange:hover {
    color: white!important;
    background-color: #ffab2f!important;
    border-color: transparent;
    border: none;
}
.custom-form {
    background: #292929!important;
    color: #ffffff!important;
}
@media (min-width: 768px) {
    .ordi-hide {
        display: none;
    }
}
@media (max-width: 768px) {
    .mobile-hide {
        display: none;
    }
    .mobile-btn-xxs {
        padding: 4px 3px !important;
    }
    .btn-icon {
        padding: 0.300rem 0.700rem;
        font-size: 20px;
    }
}
@media only screen and (max-width: 575px){
    .profile .profile-photo {
        width: 100px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    .pt-heading-responsive {
        padding-top: 60px!important;
        padding-bottom: 0px!important;
    }
    .pt-13-resp {
        padding-top: 13px!important;
    }
}
@media only screen and (min-width: 575px){
    .btn-mobile {
        display: none;
    }
    .float-right-resp {
        float: right;
    }
    .pt-heading-responsive {
        padding-bottom: 0px!important;
    }
    .card-midle {
        padding: 0rem 1.875rem 1.25rem;
    }
}
@media screen and (max-width: 767px) {
    .dataTables_length select, .dataTables_filter input {
        width: auto; /* Ajustez ceci selon les besoins */
    }
    .dataTables_length, .dataTables_filter {
        float: none;
        text-align: center;
    }
    .dataTables_filter {
        margin-top: 10px; /* Ajustez ceci selon les besoins */
    }
}
@media only screen and (max-width: 575px){
    .ml-20-resp {
        margin-left: 20px!important;
    }
    .btn-ordi {
       display: none;
    }
    .h4-responsive {
        font-size: 16px !important;
    }
    .pt-15-resp {
        padding-bottom: 15px!important;
    }
    .mt-15-resp {
        margin-top: 15px!important;
    }
}
table.dataTable tbody td.btn-lu {
    background-color: #fff!important;
}
table.dataTable tbody td.btn-non-lu {
    background-color: #e1e1e15c!important;
}
.btn-non-lu {
    background-color: #e1e1e15c!important;
}
.text-dark {
    color: #24292d !important;
}
.btn-reptitracker {
    background: linear-gradient(223deg, rgb(86 177 138) 0%, rgb(181 194 46) 100%);
    color: #24292d!important;
    border-color: transparent;
    border: none;
    transition: box-shadow 0.4s ease-in-out; /* Increased from 0.2s to 0.4s */
}

.btn-reptitracker:hover {
    background: linear-gradient(223deg, rgb(181 194 46) 0%, rgb(86 177 138) 50%);
    border-color: transparent;
    border: none;
    transition: box-shadow 0.4s ease-in-out; /* Increased from 0.2s to 0.4s */
}

.chatbox .chat-list-header {
    justify-content: center;
}
.authincation-content {
    background: #24292d;
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
    border-radius: 5px;
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #24292d;
    border-color: #cad833;
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #0B2A97;
    background-color: #cad833;
}
.page-module {
    background-color: #e9e9e9!important;
}
.auth-form {
    padding: 30px 50px;
    min-width: 385px;
}
.cursor-p {
    cursor: pointer!important;
}
.m-0 {
    margin: 0px!important;
}
.zoom-in-button {
    font-size: 16px;
    transition: box-shadow 0.3s ease-in-out;
    z-index: 1;
}

.zoom-in-button:hover {
    box-shadow: 0px 4px 22px #040404;
}

.badge-anime {
    transition: box-shadow 0.2s ease-in-out;
}

.badge-anime:hover {
    box-shadow: 1px 3px 5px #888888;
}
.small-input {
    width: 250px; /* Ajustez la largeur selon vos besoins */
}
.medium-input {
    width: 350px; /* Ajustez la largeur selon vos besoins */
}
.centered-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #2eb872;
    border-color: #2eb872;
}
.btn-xs {
    font-size: 10px !important;
    padding: 5px 6px !important;
}
.btn-xxs {
    font-size: 10px!important;
    padding: 7px 6px!important;
}
.btn-xxs-index {
    font-size: 11px !important;
    padding: 5px 17px !important;
    font-weight: 600;
}
.badge-resp {
    white-space: normal!important;
}
.badge-rose {
    background-color: #ff3282;
}
.badge-multicolor {
    color: #fff;
    background: linear-gradient(32deg, rgb(22 126 120) 0%, rgb(56 59 141) 26%, rgb(111 33 120) 50%, rgb(185 16 32) 100%);
    border-color: none;
}
.badge-multicolor:hover {
    color: #fff;
    background: linear-gradient(223deg, rgb(22 126 120) 0%, rgb(56 59 141) 26%, rgb(111 33 120) 50%, rgb(185 16 32) 100%);
    border-color: none;
}
.btn-multicolor {
    color: #fff;
    background: linear-gradient(32deg, rgb(22 126 120) 0%, rgb(56 59 141) 26%, rgb(111 33 120) 50%, rgb(185 16 32) 100%);
    border-color: #1EA7C5;
    transition: box-shadow 0.1s ease-in-out;
    border: none;
}
.btn-multicolor:hover {
    color: #fff;
    background: linear-gradient(223deg, rgb(22 126 120) 0%, rgb(56 59 141) 26%, rgb(111 33 120) 50%, rgb(185 16 32) 100%);
    border-color: #178199;
    box-shadow: -1px 7px 10px #888888;
}
.btn {
    border-radius: 0.5rem!important;
    transition: box-shadow 0.1s ease-in-out;
}
.progress-bar-heat {
    background: linear-gradient(270deg, rgb(255, 100, 31) 0%, rgb(255, 215, 74) 100%);
    box-shadow: rgba(255, 223, 110, 0.5) 0px 0px 4px 1px, rgba(255, 255, 255, 0.5) 0px 0px 5px 2px inset;
}
.btn:hover {
    box-shadow: 0px 0px 3px #888888;
}
/* Style du bouton avec une transition fluide sur hover */
.btn-info {
    color: #fff;
    background-color: #1EAAE7;
    transition: background-image 0.4s ease-in-out;
}

.btn-info:hover {
    color: #fff;
    background-color: #148abe;
}

.btn.tp-btn-light.btn-primary:hover g [fill] {
    fill: #e7e7e7;
}
.form-control {
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid #6b6b6b!important;
    color: #B1B1B1;
}
.btn-right-top {
    position: absolute;
    top: 15px;
    right: 20px;
}
.card-custom {
    height: auto!important;
    padding-left: 2px;
}
.card {
    margin-bottom: 0.938rem;
    height: auto!important;
    justify-content: space-between;
}
.btn.tp-btn-light.btn-primary g [fill] {
    fill: #ffffff;
}
.d-none {
    display: none;
}
/* Style des badges dans la sélection multiple */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0; /* Enlève le padding par défaut */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: transparent !important; /* Transparente pour éviter les conflits */
    border: none !important; /* Enlève les bordures */
    color: white !important; /* Couleur du texte des badges */
    border-radius: 4px;
    margin-right: 5px;
    margin-top: 5px;
    padding: 5px 10px; /* Ajustez le padding */
    display: inline-flex; /* Pour un bon alignement */
    align-items: center; /* Centre le contenu */
}

/* Assurez-vous que les badges apparaissent bien */
.select2-container--default .select2-selection--multiple .select2-selection__choice.badge-mutation {
    background-color: transparent !important; /* Transparente pour éviter les conflits */
    color: white !important; /* Couleur du texte des badges */
}

/* Style pour le badge de suppression */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: red; /* Couleur de la croix pour la suppression */
    cursor: pointer; /* Curseur en pointeur */
}

/* Assurez-vous que les résultats apparaissent correctement */
.select2-container--default .select2-results__option {
    display: flex;
    align-items: center;
}

.select2-container--default .select2-results__option .badge {
    margin-right: 8px; /* Espacement entre l'icône et le texte */
}

.badge-warning {
    color: #24292d;
    background-image: radial-gradient(circle at center, rgb(255 183 0), rgb(233 174 21));
    border: none;
}
.light.badge-success {
    background-image: linear-gradient(310deg, #17ad37, #98ec2d) !important;
    color: #ffffff;
}
.bg-multicolor {
    background: linear-gradient(223deg, rgb(22 126 120) 0%, rgb(56 59 141) 26%, rgb(111 33 120) 50%, rgb(185 16 32) 100%);
}
.bgl-multicolor{
    background: linear-gradient(223deg, rgb(22 126 120) 0%, rgb(56 59 141) 26%, rgb(111 33 120) 50%, rgb(185 16 32) 100%);
}
.w-100 {
    width: 100px!important;
}
.w-100-p {
    width: 100%!important;
}
.light.badge-secondary {
    background-color: #f1dffe;
    color: #ffffff;
}
@media only screen and (max-width: 1400px){
    .list-group-item {
        background-color: rgba(255, 255, 255, 0);
        border: 1px solid #f0f1f5;
        padding: 0.7rem 1.5rem;
        border-radius: 0;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        display: inline-block;
        margin-right: 20px;
    }
    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        margin-bottom: 0;
    }
    .dataTables_wrapper .dataTables_filter input {
        max-width: 120px;
    }
}
@media only screen and (max-width: 768px) {
    .dataTables_wrapper .dataTables_filter input {
        width: auto; /* Réglez la largeur sur 'auto' ou une valeur spécifique plus petite si nécessaire */
        display: inline-block; /* Assurez-vous que l'input est en ligne et ne prend pas toute la largeur */
    }
    .dataTables_wrapper .dataTables_filter {
        white-space: nowrap; /* Empêche les éléments de passer à la ligne suivante */
        margin-bottom: 10px; /* Ajoutez de l'espace en dessous si nécessaire */
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        box-sizing: border-box; /* S'assure que la largeur inclut le padding et la bordure */
    }
}
@media only screen and (min-width: 1200px){
    .mt-4-ordi {
        margin-top: 4px;
    }
}
@media only screen and (max-width: 1200px){
    .mt-2-mobile {
        margin-top: 2px;
    }
}
@media only screen and (min-width: 1400px){
    .dataTables_length {
        position: relative;
    }
}
.header-right .notification_dropdown .nav-link {
    color: #24292d!important;
    background: rgb(244 245 249);
}
.btn-page {
    display:flex!important;
    display: flex!important;
    padding-right: 50px;
}
.testimonial-one .owl-nav .owl-prev, .testimonial-one .owl-nav .owl-next {
    color: #2eb872!important;
}
.badge-success {
    color: #fff;
    background-image: radial-gradient(circle at center, rgba(40, 199, 111, 1), rgba(36, 174, 91, 0.8));
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    border: none;
}
.bg-success {
    background: linear-gradient(223deg, rgb(42 215 90) 0%, rgb(69 203 133) 100%);
}
.btn-success {
    background-color: #2BC155;
    border-color: transparent;
    border: none;
}
.btn-success:hover {
    background-color: #4bca6f;
    border: none!important;
}
.btn-success-index {
    background-color: #2BC155;
    border-color: transparent;
    border: none;
}
.btn-success-index:hover {
    background: linear-gradient(223deg, rgb(249 249 249) 0%, rgb(217 217 217) 100%);
    border-color: transparent;
    border: none;
    color: #24292d!important;
}
.btn-yellow-index {
    background: linear-gradient(223deg, rgb(255 197 0) 0%, rgb(241 186 0) 100%);
    border-color: transparent;
    border: none;
    color: #2e3438!important;
}
.btn-yellow-index:hover {
    background: linear-gradient(223deg, rgb(249 249 249) 0%, rgb(217 217 217) 100%);
    border-color: transparent;
    border: none;
    color: #24292d!important;
}
.btn-rose-index {
    background: #ff3282;
    border-color: transparent;
    border: none;
}
.btn-rose-index:hover {
    background: linear-gradient(223deg, rgb(249 249 249) 0%, rgb(217 217 217) 100%);
    border-color: transparent;
    border: none;
    color: #24292d!important;
}
.alert.alert-success.solid {
    background: linear-gradient(223deg, rgb(42 217 91) 0%, rgb(43 193 85) 100%);
}
.alert-info {
    background: linear-gradient(223deg, rgb(0 102 255) 0%, rgb(26 147 173) 100%);
    border: none!important;
}
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: #2eb872;
    border-color: #2eb872;
}
.accordion-header-bg .accordion__header--success {
    background: linear-gradient(223deg, rgb(42 215 90) 0%, rgb(69 203 133) 100%);
    border-color: transparent;
    border: none;
}
.bg-success {
    background: linear-gradient(223deg, rgb(42 217 91) 0%, rgb(43 193 85) 100%);
    border-color: transparent;
    border: none;
}
.alert.alert-success.solid {
    background: linear-gradient(223deg, rgb(42 217 91) 0%, rgb(43 193 85) 100%);
    border-color: transparent;
    border: none;
}
.accordion-header-bg .accordion__header--primary {
    background: linear-gradient(223deg, rgb(23 141 184) 0%, rgb(2 106 249) 100%);
    border-color: #00000000!important;
}
.accordion-info-solid .accordion__body {
    border: 2px solid #0875e5;
    border-top: none;
    box-shadow: 0 15px 20px 0 rgb(8 115 231 / 15%);
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    padding: 1.85rem;
}
.accordion-header-bg .accordion__header--success {
    background: linear-gradient(223deg, rgb(44 214 93) 0%, rgb(62 206 122) 100%);
    border-color: #00000000 !important;
}
.accordion-success-solid .accordion__header {
    background: #2ed660;
    border-color: #2dd65e;
    color: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 -10px 20px 0 rgb(44 214 93 / 0%);
}
.accordion-success-solid .accordion__body {
    border: 2px solid #32d466;
    border-top: none;
    box-shadow: 0 15px 20px 0 rgb(49 211 101 / 0%);
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    padding: 1.85rem;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #cad833;
}
.nav-pills .nav-link {
    border-radius: 0.5rem!important;
}
.btn.tp-btn-light.btn-info g [fill] {
    fill: #fff;
}
.badge-info {
    background-color: #148abe;
    border-color: transparent;
    border: none;
    color: #fff !important;
}
.bg-secondary {
    background-color: #AC39D4;
    border-color: transparent;
    border: none;
}
.btn-secondary {
    background-color: #AC39D4;
    border-color: transparent;
    border: none;
}
.btn-secondary:hover {
    background-color: #9230b4;
    border-color: transparent;
    border: none;
}
.btn-secondary-index {
    background: linear-gradient(223deg, rgb(160 44 250) 0%, rgb(157 86 211) 100%);
    border-color: transparent;
    border: none;
}
.btn-secondary-index:hover {
    background: linear-gradient(223deg, rgb(249 249 249) 0%, rgb(217 217 217) 100%);
    border-color: transparent;
    border: none;
    color: #24292d!important;
}
.btn-materiel {
    background: linear-gradient(223deg, rgb(255 136 0) 0%, rgb(255 94 0) 100%);
    border-color: transparent;
    border: none;
}
.btn-materiel:hover {
    background: linear-gradient(223deg, rgb(255 102 0) 0%, rgb(255 133 0) 100%);
    border-color: transparent;
    border: none;
}
.btn-rose {
    background-image: conic-gradient(from 1turn, rgb(201 34 139), rgb(250 49 131));
    border-color: transparent;
    border: none;
}
.btn-rose:hover {
    background-image: conic-gradient(from 1turn, rgb(173 51 128), rgb(255 110 169));
    border-color: transparent;
    border: none;
}
.alert-secondary {
    background: linear-gradient(223deg, rgb(160 44 250) 0%, rgb(157 86 211) 100%);
    border-color: transparent;
    border: none;
}
.alert-secondary:hover {
    border-color: transparent;
    border: none;
}
.badge-secondary {
    background-color: #AC39D4;
    border-color: transparent;
    border: none;
}
.badge-materiel {
    background-color: #AC39D4;
    border-color: transparent;
    border: none;
}
.alert.alert-secondary.solid {
    background: linear-gradient(223deg, rgb(160 44 250) 0%, rgb(157 86 211) 100%);
    border-color: transparent;
    border: none;
}
.bg-info {
    background: linear-gradient(223deg, rgb(26 147 173) 0%, rgb(4 109 244) 100%);
    border-color: transparent;
    border: none;
}
.alert.alert-info.solid {
    background: linear-gradient(223deg, rgb(26 147 173) 0%, rgb(77 1 157) 100%);
    border-color: transparent;
    border: none;
}
.alert.alert-rose.solid {
    background: #ff3282;
    border-color: transparent;
    border: none;
}
.bg-qr {
    background: linear-gradient(223deg, rgb(255 188 17) 0%, rgb(245 222 102) 100%);
    border-color: transparent;
    border: none;
}
.bg-rose {
    background-color: #ff3282;
    border-color: transparent;
    border: none;
}
.alert.alert-warning.solid {
    background-color: #FE8024;
    border-color: transparent;
    border: none;
}
.btn-warning {
    color: #fff;
    background-color: #FE8024;
    border-color: transparent;
    border: none;
}
.btn-warning:hover {
    color: #fff;
    background-color: #fe9345;
}
.alert.alert-danger.solid {
    background: linear-gradient(223deg, rgb(249 70 70) 0%, rgb(255 106 35) 100%);
    border-color: transparent;
    border: none;
}
.badge-danger {
    color: #fff;
    background-image: conic-gradient(from 1turn, rgb(255 42 42 / 90%), rgb(255 43 43));
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    border: none;
}
.btn-danger {
    background-image: conic-gradient(from 1turn, rgb(255 42 42 / 90%), rgb(255 43 43));
    border-color: transparent;
    border: none;
    transition: box-shadow 0.1s ease-in-out;
}
.btn-outline-danger {
    border-color: linear-gradient(223deg, rgb(249 70 70) 0%, rgb(255 106 35) 100%);
    color: #f94843;
}
.btn-outline-danger:hover {
    background: linear-gradient(223deg, rgb(249 70 70) 0%, rgb(255 106 35) 100%);
}











/* ALERT EN BANNIERE EN BAS DE PAGE */
:root {
    --promoSnackBarBorderRadius: 8px;
    --promoSnackBarColor: #FFFFFF;
    --promoSnackBarBoxShadow: 0px 2px 10px rgba(28, 66, 121, 0.50);
    --promoSnackBarTitleFontSize: 16px;
    --promoSnackBarTitleMobileFontSize: 12px;
    --promoSnackBarDescriptionFontSize: 18px;
    --promoSnackBarAddInfoTitlFontSize: 18px;
    --promoSnackBarWithCookieBarBottomDesktop: 90px;
    --promoSnackBarWithCookieBarBottomMobile: 130px;
    --promoSnackBarBottomMobileModern: 60px;
    --promoSnackBarWithCookieBarBottomMobileModern: 140px;
    --promoSnackBarButtonClose: #FFFFFF;
    --promoSnackBarButtonCloseOpacity: 0.5;
}
.promo-snackbar-module_addInfoTop__fSH8L {
    display: flex;
    align-items: center;
}
.promo-snackbar-module_main__Ja1aN.promo-snackbar-module_withImage__X54Zr {
    padding: 16px 40px 16px 130px;
}
.promo-snackbar-module_main__Ja1aN {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 30px;
    left: 50%;
    width: 1180px;
    height: 90px;
    padding: 16px 40px 16px 16px;
    border-radius: var(--promoSnackBarBorderRadius, 8px);
    color: var(--shiny-cta-bg-subtle);
    background: var(--promoSnackBarBackgroundColor);
    box-shadow: 0 2px 10px var(--promoSnackBarBoxShadow);
    z-index: var(--zIndex-promoSnackbar, 350);
    animation: promo-snackbar-module_fadeInUpSnackbar__F7Yzr 0.3s ease-in-out both;
    opacity: 0;
    transform: translate3d(-50%, 25%, 0);
    transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.promo-snackbar-module_backgroundImage__J006A {
    position: absolute;
    left: 0;
    bottom: 0;
    max-height: 130%;
    max-width: 160px;
}
.promo-snackbar-module_inside__qXPtr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    margin: 0 -5px;
    max-width: -webkit-fill-available;
}
.promo-snackbar-module_left__THtGK {
    display: flex;
    flex-direction: column;
    max-width: 60%;
}
.promo-snackbar-module_left__THtGK, .promo-snackbar-module_right__Ep8Nz {
    flex-grow: 1;
    padding: 0 0px 0px 40px;
}
.promo-snackbar-module_title__OOYD9, .promo-snackbar-module_description__I3pvS {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.promo-snackbar-module_title__OOYD9 {
    font-size: var(--promoSnackBarTitleFontSize, 16px);
    font-weight: 700;
    margin-bottom: 5px;
}
.promo-snackbar-module_description__I3pvS {
    font-size: var(--promoSnackBarDescriptionFontSize, 20px);
    font-weight: 700;
}
.promo-snackbar-module_right__Ep8Nz {
    display: flex;
    align-items: center;
    max-width: 60%;
}
.promo-snackbar-module_main__Ja1aN.promo-snackbar-module_withImage__X54Zr {
    padding: 16px 40px 16px 130px;
}
.promo-snackbar-module_main__Ja1aN {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 30px;
    left: 50%;
    width: 1180px;
    height: 90px;
    padding: 16px 40px 16px 16px;
    border-radius: var(--promoSnackBarBorderRadius, 8px);
    color: var(--white);
    background: var(--promoSnackBarBackgroundColor);
    box-shadow: 0 2px 10px var(--promoSnackBarBoxShadow);
    z-index: var(--zIndex-promoSnackbar, 350);
    animation: promo-snackbar-module_fadeInUpSnackbar__F7Yzr 0.3s ease-in-out both;
    opacity: 1; 
    transform: translate3d(-50%, 25%, 0);
    transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.promo-snackbar-module_main__Ja1aN.promo-snackbar-module_withImage__X54Zr .promo-snackbar-module_addInfoItem__B8-j8 {
    max-width: 160px;
}
.promo-snackbar-module_addInfoItem__B8-j8 {
    display: flex;
    flex-direction: column;
    max-width: 180px;
    padding: 0 10px;
}
.promo-snackbar-module_addInfoImageWrapper__fqhUy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    min-width: 25px;
    height: 25px;
    margin-right: 8px;
}
.promo-snackbar-module_addInfoImage__DFsep {
    max-width: 100%;
    max-height: 100%;
}
.promo-snackbar-module_addInfoTitle__-sNFd, .promo-snackbar-module_addInfoBot__uf2mo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.promo-snackbar-module_addInfoTitle__-sNFd {
    font-size: var(--promoSnackBarAddInfoTitlFontSize, 20px);
    font-weight: 700;
}
.promo-snackbar-module_addInfoBlock__-LRZv {
    display: flex;
    align-items: center;
    margin: 0 -10px;
}
.promo-snackbar-module_button__3rdfj {
    margin-left: 30px;
}
.promo-snackbar-module_button__3rdfj .app-button {
    text-shadow: none;
}
.app-button--default, .app-button--secondary {
    text-shadow: 0 0 2px #104839;
    background-image: linear-gradient(310deg, #17ad37, #98ec2d) !important;
}
.app-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    padding: 0 16px;
    overflow: hidden;
    white-space: nowrap;
    height: 40px;
    max-width: 100%;
}
.promo-snackbar-module_close__keoze {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 16px;
    color: var(--promoSnackBarButtonClose);
    opacity: var(--promoSnackBarButtonCloseOpacity, 0.5);
    transition: opacity 0.3s ease-in-out;
}
@media screen and (max-width: 1800px) {
    .no-display-phone__Ja1aN {
        display: none!important;
    }
}
@media screen and (max-width: 1200px) {
    .promo-snackbar-module_main__Ja1aN {
        width: calc(100% - 16px);
    }
    .promo-snackbar-module_left__THtGK {
        max-width: 100%!important;
    }
    .promo-snackbar-module_backgroundImage__J006A {
        position: absolute;
        left: 0;
        bottom: 0;
        max-height: 90%;
        max-width: 110px;
    }
    .promo-snackbar-module_inside__qXPtr {
        margin: 0 -20px;
    }
    .promo-snackbar-module_left__THtGK, .promo-snackbar-module_right__Ep8Nz {
        padding: 0 5px;
    }
}
.p-relative {
    position: relative!important;
}
.center-background {
    background-size: cover; 
    background-position: center;
}

/* POUR LES BADGES DES MUTATIONS */
.no-top-border-radius {
    border-top-left-radius: 0px!important;
    border-top-right-radius: 0px!important;
}
.badge-edit {
    -webkit-box-align: center;
    align-items: center;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 2px;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1rem;
    letter-spacing: 0.025rem;
    text-overflow: ellipsis;
    overflow: hidden;
    background: #008cf1;
    border: 1px solid rgb(147, 130, 255) !important;
    color: #ffffff;
}
.badge-edit:hover {
    color: #ffffff!important;
    background: #008cf1;
}
.badge-mutation {
    -webkit-box-align: center;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 2px;
    font-weight: 600;
    font-size: 0.65rem;
    line-height: 1rem;
    letter-spacing: 0.025rem;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
}
.badge-mutation:hover {
    box-shadow: 0px 0px 10px #797979;
}
.badge-mutation-2 {
    -webkit-box-align: center;
    align-items: center;
    padding: 10px 15px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 2px;
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1rem;
    letter-spacing: 0.025rem;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
}
.y1 {
    background: rgb(255, 215, 74);
    border: 1px solid rgb(255, 215, 74);
    color: rgb(25, 26, 31);
}
.b2 {
    background: rgb(186, 230, 255);
    border: 1px solid rgb(186, 230, 255);
    color: rgb(25, 26, 31);
}
.b3 {
    background: rgb(21, 190, 187);
    border: 1px solid rgb(21, 190, 187);
    color: rgb(25, 26, 31);
}
.ba4 {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), rgb(25 26 31 / 0%);
    border: 1px solid rgb(21, 190, 187);
    color: rgb(21, 190, 187);
}
.y5 {
    background: rgb(255, 225, 137);
    border: 1px solid rgb(255, 225, 137);
    color: rgb(25, 26, 31);
}
.ya6 {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), rgb(25 26 31 / 0%);
    border: 1px solid rgb(255, 225, 137);
    color: rgb(255, 225, 137);
}
.p7 {
    background: rgb(212, 187, 255);
    border: 1px solid rgb(212, 187, 255);
    color: rgb(25, 26, 31);
}
.r8 {
    background: rgb(236, 134, 91);
    border: 1px solid rgb(236, 134, 91);
    color: rgb(25, 26, 31);
}
.inconnu {
    cursor: initial!important;
    border: 1px solid rgb(69, 69, 74);
}
.inconnu:hover {
    box-shadow: none!important;
}
.pa9 {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), rgb(25 26 31 / 0%);
    border: 1px solid rgb(212, 187, 255)!important;
    color: rgb(212, 187, 255);
}
/* POUR LES BADGES DES MUTATIONS */
.r9 {
    background: linear-gradient(0deg, rgb(86 178 139 / 16%), rgba(255, 255, 255, 0.05)), rgb(25 26 31 / 0%);
    border: 1px solid rgb(202 216 51);
    color: rgb(202 216 51);
}
.r9:hover {
    background: linear-gradient(0deg, rgb(86 178 139 / 16%), rgba(255, 255, 255, 0.05)), rgb(25 26 31 / 0%);
    border: 1px solid rgb(86 178 139);
    color: rgb(86 178 139);
}