body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .btn,
        input,
        textarea,
        select {
            font-family: 'Poppins', sans-serif !important;
        }
        
        .loader {
            position: relative;
            margin: auto;
            width: 2vmin;
            height: 2vmin;
        }

        .loader-el {
            --origin-x: center;
            --origin-y: center;
            width: 8px;
            height: 8px;
            position: absolute;
            top: calc(50% - 4px);
            left: calc(50% - 4px);
            -webkit-animation: spin 0.6s linear infinite;
            animation: spin 0.6s linear infinite;
        }

        .loader-el::before,
        .loader-el::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 100%;
            -webkit-animation: spin 1s ease-out infinite;
            animation: spin 1s ease-out infinite;
            transform-origin: var(--origin-x) var(--origin-y);
            background-color: #00ADB5;
        }

        .loader-el:nth-child(1)::before {
            --origin-y: -100%;
        }

        .loader-el:nth-child(1)::after {
            --origin-y: 200%;
        }

        .loader-el:nth-child(2)::before {
            --origin-x: -100%;
        }

        .loader-el:nth-child(2)::after {
            --origin-x: 200%;
        }


        @-webkit-keyframes spin {
            to {
                transform: rotate(1turn);
            }
        }

        @keyframes spin {
            to {
                transform: rotate(1turn);
            }
        }

        .justify-content-spinner {
            height: 100%;
        }

        .card-medium-image img {
            max-width: 260px !important;
            transition: all .2s ease-in-out !important;
        }

        #label-consigne:hover {
            cursor: pointer;
        }

        .no-bullets {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: left;

        }

        .hidden {
            display: none;
        }

        .chevron-right {
            margin-right: 10px;
        }

        .clickable-card {
            cursor: pointer;
        }

        .exclusive-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #ff4757;
            /* Rouge vif */
            color: #ffffff;
            /* Texte blanc */
            font-weight: bold;
            border-radius: 5px;
            text-align: center;
            text-decoration: none;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease, transform 0.3s ease;
            animation: flashBackground 2s infinite;

        }

        .exclusive-btn:hover {
            text-decoration: none;
            color: #ffffff;
        }

        .exclusive-btn:active {
            background-color: #c0392b;
            /* Rouge encore plus foncé lors de la pression */
            transform: translateY(1px);
            /* Léger effet d'enfoncement lors de la pression */
        }

        @keyframes flashBackground {

            0%,
            100% {
                background-color: #e71a2b;
                /* Couleur d'origine */
            }

            50% {
                background-color: #ff6b7f;
                /* Légère variation de couleur pour l'effet "flash" */
            }
        }

        .custom-btn {
            position: relative;
            padding-right: 30px;
            /* Adjust based on your needs */
        }

        .close-badge {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background-color: transparent;
            border: none;
            font-size: 1.2rem;
            line-height: 1;
            color: white !important;
            opacity: 0.7;
        }

        .close-badge:hover {
            opacity: 1;
        }

        .tippy-box[data-theme~='dynamic'] {
            --dynamic-bg-color: #f0f0f0;
            --dynamic-txt-color: #000000;
            background-color: var(--dynamic-bg-color);
            color: var(--dynamic-txt-color);
            border: 2px solid white;
        }

        /* Style de l'arrow pour chaque position possible */
        .tippy-box[data-theme~='dynamic'][data-placement^='top']>.tippy-arrow::before {
            border-top-color: var(--dynamic-bg-color);
        }

        .tippy-box[data-theme~='custom'] {
            --custom-bg-color: #00ADB5;
            --custom-txt-color: white;
            background-color: var(--custom-bg-color);
            color: var(--custom-txt-color);
        }

        .tippy-box[data-theme~='custom']>.tippy-arrow {
            --tippy-arrow-color: var(--custom-bg-color);
        }

        #dataTable td {
            border-left: none;
            border-right: none;
        }

        @media only screen and (max-width: 767px) {
            .hide-on-mobile {
                display: none !important;
            }
        }

        .badge-market {
            display: inline-block;
            padding: 3px 4px;
            /* Valeurs réduites pour rendre le badge plus petit */
            margin-top: 2px;
            /* Espace au-dessus du badge réduit */
            box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
            font-weight: 300;
            /* Rend le texte plus fin. Vous pouvez ajuster cette valeur selon vos besoins */
        }

        p.domain {
            font-size: 16px;
            margin-bottom: 1px;
            font-weight: bold;
            font-style: italic;
        }

        .black-underline {
            color: #4A5568;
            text-decoration: underline;
        }

        .black-underline:hover {
            color: #00ADB5 !important;
        }

        .btn-block {
            display: block;
            width: 100%;
            /* Ensure that buttons take up all available width */
            margin-bottom: 5px;
            /* Add a little bit of margin at the bottom of each button */
        }

        .shopping-cart {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .cart-line {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .item-description,
        .item-cost {
            margin-right: 8px;
        }

        .item-description {
            font-weight: bold;
        }

        .item-cost {
            color: green;
        }

        .btn-total {
            background-color: #00ADB5;
            color: #FFF;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .card {
            flex-direction: column;
        }

        .card-body img {
            max-width: 100%;
            height: auto;
        }

        .card-title,
        .card-body small {
            text-align: center;
        }

        .btn-lg {
            padding: 10px 20px;
            font-size: 16px;
        }

        @media only screen and (max-width: 600px) {
            .btn-lg {
                font-size: 14px;
            }
        }

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #393E46;
}

.badge-outline-secondary {
    color: #393E46 !important;
    background-color: transparent !important;
    border: 1px solid #393E46 !important;
    font-weight: 400 !important;
}

.custom-link-secondary {
    color: #393E46 !important;
    text-decoration: none;
}

.custom-link-secondary:hover,
.custom-link-secondary:focus {
    color: #5a6268 !important;
    text-decoration: underline;
}

@keyframes pulseGrowAnimation {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(57, 62, 70, 0.7);
        /* Début avec une ombre grise transparente */
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 4px rgba(57, 62, 70, 0.5);
        /* Ombre grise plus visible et plus étendue */
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(57, 62, 70, 0);
        /* Retour à une ombre transparente */
    }
}

.pulse-button-enhanced {
    animation: pulseGrowAnimation 2s infinite;
    transition: transform 0.5s ease-in-out;
}

.modal-xl {
    max-width: 70% !important;
}

.label-profil {
    font-weight: 600 !important;
}

.main-sidebar { background-color: #222831 !important }


.koa-top-bar-title {
    background-color: #00ADB5;
    width: -moz-fit-content;
    width: fit-content;
    padding: .25rem 2rem;
    border-radius: 4px;
    font-size: 1.5rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
}

.koa-top-bar-recharge {
    background-color: #393E46;
    text-transform: uppercase;
    color: #00ADB5;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-max-content;
    height: max-content;
    padding: .6rem 1.2rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
}

.koa-top-bar-recharge:hover {
    background-color: #00ADB5;
    color: #393E46;
}

.nav-link:hover{
    color: #00ADB5 !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #00ADB5 !important;
    border-color: #00ADB5 !important;
}

.brand-custom {
    height: 70px !important;
}