:root {
    --primary: rgb(225, 255, 87);
    --background: rgb(0, 0, 0);
    --gray-card: #1a1a1a;
    --card-border: #1a1a1a;
    --color: rgb(255, 255, 255);
    --small: #b7b7b7;
    --week-day-color: #aaa;
    --week-day-border: #333;
    --week-day-border-hover: #fff;
    --week-day-color-hover: #fff;
    --gray: #6c757d;
    --header-border: rgba(255, 255, 255, 0.3);
    --header-bg-element: #171717;
    --header-color-menu: #d4d4d4;
    --header-hover-menu: #383838;
    --profil-border-banner: rgba(255, 255, 255, 0.3);
    --profil-bg-input: rgba(255, 255, 255, 0.05);
    --profil-border-input: rgba(255, 255, 255, 0.1);
    --border-color-select: rgba(255, 255, 255, 0.3);
    --btn-show-more-color-select: rgba(255, 255, 255, 0.3);
    --selected-bg-select: rgba(255, 255, 255, 0.1);
    --selected-color-select: rgb(255, 255, 255);
    --search-bar-border-select: rgba(255, 255, 255, 0.3);
    --card-bg-home: rgb(13, 13, 13);
    --card-border-home: #333;
    --color-i-profil: #000;
    --dtl-bg-event: #2b2b2b;
    --dtl-border-event: #2b2b2b;
    --dtl-btn-event: #fff;
    --dtl-minutes-bg-event: #000;
    --dtl-bg-features: #0d0d0d;
    --dtl-border-btn: #1c1c1c;

    --stats-bar-bg: #3e3e3e;
    --stats-value-left-bg: #fff;
    --stats-value-right-bg: #888;




}

[data-theme="light"] {
    --primary:#d81664;
    --background: #fff;
    --gray-card: #fff;
    --card-border: #e1e0e7;
    --color: #000;
    --small: #6d6a7f;
    --week-day-color: #000;
    --week-day-border: #000;
    --week-day-border-hover: #000;
    --week-day-color-hover: #000;
    --gray: #6c757d;
    --header-border: #e1e0e7;
    --header-bg-element: rgb(249, 249, 249);
    --header-color-menu: #757575;
    --header-hover-menu: #ebebeb;
    --profil-border-banner: #e1e0e7;
    --profil-bg-input: rgba(182, 182, 182, 0.05);
    --profil-border-input: #eee;
    --border-color-select: rgba(72, 72, 72, 0.3);
    --btn-show-more-color-select: rgba(72, 72, 72, 0.3);
    --selected-bg-select: rgba(98, 98, 98, 0.1);
    --selected-color-select: rgb(0, 0, 0);
    --search-bar-border-select: rgb(0, 0, 0);
    --card-bg-home: rgb(255, 255, 255);
    --card-border-home: #e1e0e7;
    --color-i-profil: #fff;


    --dtl-bg-event: #fff;
    --dtl-border-event: #e1e0e7;
    --dtl-btn-event: var(--primary);
    --dtl-minutes-bg-event: #fff;


    --dtl-bg-features: #f5f5fa;
    --dtl-border-btn: #e1e0e7;

    --stats-bar-bg: #e1e0e7;
    --stats-value-left-bg: #6d6a7f;
    --stats-value-right-bg: #000;




}




* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    background: var(--background);
    color: var(--color);
    overflow-x: hidden;
}

.conteiner,
.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1rem;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* Change la couleur de la barre de progression */
#nprogress .bar {
    background: var(--primary) !important;
    /* Mets ta couleur ici */
    z-index: 99999999999;
}

/* Change la couleur du petit rond (optionnel) */
#nprogress .peg {
    box-shadow: none !important;
}

@media (max-width: 764px) {

    .conteiner,
    .container {
        padding: 10px !important;
    }
}

@media (max-width: 1650px) {

    .conteiner,
    .container {
        max-width: 1300px !important;
    }
}