/*
    index.css

    Description :
    Cette feuille de styles CSS définit le style que doit prendre la vue d'index

    Auteur : Shendar Ali
    Date : 06.05.2024
    Version : 2.0

    Modifications :
    [Liste des modifications avec dates et descriptions]
*/

:root {
    --background-color: white;
    --odd-row-color: #d9e8ff;
    --even-row-color: #e6f0ff;
    --text-color: black;
}

/* Styles pour le titre <h1> */
h1 {
    margin-top: 2vh !important;
    flex: 1;
    text-align: center;
}

/* Styles pour le bouton "Se connecter" */
#login {
    margin-left: auto;
}

/* Styles pour la DataTable */
#listeEquipes {
    width: 100%;
}

.dataTables_scrollBody {
    /*overflow: hidden !important;*/
}

body {
    background: var(--background-color) !important;
    /*overflow: hidden;*/
}

.container-fluid {
    align-items: flex-end !important;
    flex-direction: row !important;
}

html,
body {
    margin: 0;
    padding: 0;
    min-width: 100vw;
    min-height: 100vh;
}

.odd {
    /*background-color: var(--odd-row-color) !important;*/
}

.even {
    /*background-color: var(--even-row-color) !important;*/
}

nav {
    margin-top: 10vh;
}

@media (max-width: 991px) {
    .move-menu-left {
        order: -1;
    }
}

thead {
    background-color: #322560;
    color: white !important;
}

/* Style pour le conteneur global */
.progress-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Ajustez la largeur en fonction de vos besoins */
    margin: 10px;
}

/* Style pour les étiquettes */
label {
    font-weight: bold;
}

/* Style pour la barre de progression globale */
.progress-bar {
    border-radius: 25px;
    height: 20px;
    width: 100%;

    position: relative;
    overflow: hidden;
    /* Masque le contenu qui dépasse */
}

/* Style pour le fond de la barre de progression */
.progress-background {
    height: 100%;
    background-color: #bbb1b1;
}

/* Style pour la progression de la barre */
#energie-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
            rgba(11, 208, 255, 1) 0%,
            rgba(9, 56, 121, 1) 100%);
    width: 0;
    /* Démarre avec une largeur de 0 */
    position: absolute;
    /* Se superpose à progress-background */
    top: 0;
    left: 0;
}

#hydrostick-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
            rgba(11, 255, 14, 1) 0%,
            rgba(9, 121, 28, 1) 100%);
    width: 0;
    /* Démarre avec une largeur de 0 */
    position: absolute;
    /* Se superpose à progress-background */
    top: 0;
    left: 0;
}

/* Style pour la graduation de la barre (vous pouvez ajuster au besoin) */
.progress-graduation {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
}

.graduation {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: rgb(255, 255, 255);
    /* Couleur de la graduation */
    z-index: 1;
}

.graduation:first-child {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: transparent;
    /* Couleur de la graduation */
    z-index: 1;
}

#energie-progress-bar {
    border-radius: 25px 25px 0% 0%;
}

#hydrostick-progress-bar {
    border-radius: 0% 0% 25px 25px;
}

#listeEquipes {
    overflow-y: auto;
}

.navbar-collapse {
    justify-content: space-evenly;
}

.content {
    display: block;
    width: 100%;
} 

footer {
    position: relative !important;
}
footer #reader {
    display: none;
}



.background-aee37f {
    background-color: #aee37f !important;
}

.background-e37f7f {
    background-color: #e37f7f !important;
}

.background-c7f6c4 {
    background-color: #c7f6c4 !important;
}

.background-ec4256 {
    background-color: #ec4256 !important;
}