
<style>
    body {
        margin: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: rgb(156, 191, 255);
        color: #fff;
        font-family: Arial, sans-serif;
    }

    .color-picker-container {
        text-align: center;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .color-preview {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 10px auto;
        border: 1px solid #ccc;
    }

    input[type="color"] {
        cursor: pointer;
    }

    .controls {
        width: 99%;
        background-color: #757585;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }

    table {
        width: 100%;
        margin-bottom: 1px;
    }

    td {
        vertical-align: middle;
        padding: 1px;
    }

    .left-column {
        text-align: left;
		width: auto; /* Ajuste automatiquement la largeur */
		vertical-align: middle; /* Aligne le contenu verticalement */
	}

    .right-column {
        text-align: right;
        width: 150px;
		width: auto; /* Ajuste automatiquement la largeur */
		vertical-align: middle; /* Aligne le contenu verticalement */
    }

    button, select {
        font-size: 12px;
        margin: 3px 3px;
        border: none;
        cursor: pointer;
        background-color: #aaa;
        color: #fff;
        border-radius: 5px;
        padding: 4px;
        text-align: center;
    }

    #container {
        flex-grow: 1;
        width: 100%;
        margin: 0px auto; /* Ajusté pour un peu plus de marge */
        height: 100%;
        background-color: #F5F5F5; /* Couleur de fond */
        border-radius: 8px;       /* Coins arrondis */
    }

    #chart {
        background-color: #F5F5F5;
        border-radius: 8px;
        padding: 10px;
    }

    /* #colorPicker{ */
        /* position: relative; */
        /* top:2px; */
        /* padding-left: 3px; */
        /* padding-right: 3px; */
        /* border-radius: 5px; */
        /* height: 22px; */
        /* width: 50px; */
        /* margin-left: 20px; */
    /* } */

    /* #colorPickerFond { */
        /* position: relative; */
        /* top: 2px; */
        /* left:20px; */
        /* background-color: #f5f5f5; */
        /* padding-left: 3px; */
        /* padding-right: 3px; */
        /* border-radius: 5px; */
        /* height: 24px; */
        /* width: 50px; */
        /* margin-left: 0px; */
    /* } */

     #Btn_label_couleur_serie{ 
        /* position: relative; */
        /* left: 20px; */
        /* top: 0px; */
        /* font-size: 12px; */
        /* height: 22px; */
        /* margin: 3px 3px; */
        /* border: none; */
        /* cursor: pointer; */
        /* background-color: #757585; */
        /* color: #F5F5F5; */
        /* border-radius: 5px; */
        /* padding: 4px; */
        text-align: right;
    }

    #fond_graphe{ 
        /* position: relative; */
        /* left: 20px; */
        /* top:0px; */
        /* height: 22px; */
        /* margin: 3px 3px; */
        /* border: none; */
        /* background-color: #757585; */
        /* color: #F5F5F5; */
        /* border-radius: 5px; */
        /* padding: 4px; */
        text-align: right;
     } 

    #granularity, #chart-type, #interval,#donnee_type {
        background-color: #aaa;
        color: #fff;
        border-radius: 5px;
        padding: 4px;
        margin: 3px 3px;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
		border: 1px solid #fff;
    }
	
	#donnee_type {
	    position: relative;
        left: 3px;
        top:0px;
	}
	
	#open-modal-btn {
        background-color: #aaa;
        color: #fff;
        border-radius: 5px;
        margin: 0px 0px;
		padding: 3px 8px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
		border: 1px solid #fff;
    }
	
	#granularity:hover, #chart-type:hover, #interval:hover,#open-modal-btn:hover {
    background-color: #ccc; /* Couleur de fond plus foncée */
    border-color: #555; /* Bordure blanche */
	color: #f66;
    transform: scale(1.05); /* Agrandissement subtil */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre portée subtile */
	}

	#chart-type {
        position: relative;
        left: 5px;
        top:0px;
	}
	
    #granularity {
        position: relative;
        left: -5px;
        top:0px;
		border: 1px solid #fff;
    }

    #maj_auto {
        position: relative;
        left: 2px;
        top: 0px;
        background-color: #aaa;
        color: #fff;
        border-radius: 5px;
        padding: 4px;
        margin: 3px 3px;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        width:70px;
		border: 1px solid #fff;
    }

    .datetime-picker-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
    }

    /* Personnalisation des labels (optionnel) */
    #lbl1, {
        position: relative;
        left: 20px;
        top: 0px;
        font-size: 12px;
        height: 22px;
        margin: 3px 3px;
        border: none;
        cursor: pointer;
        background-color: #757585;
        color: #F5F5F5;
        border-radius: 5px;
        padding: 4px;
        text-align: center;
    }
    *
    #lbl2, {
        position: relative;
        left: 20px;
        top: 0px;
        font-size: 12px;
        height: 22px;
        margin: 3px 3px;
        border: none;
        cursor: pointer;
        background-color: #757585;
        color: #F5F5F5;
        border-radius: 5px;
        padding: 4px;
        text-align: center;
    }

    /* Alignement des champs de date et heure */
    .datetime-picker-container input[type="datetime-local"] {
        display: block;
        width: 100%;
        font-size: 12px;
    }

	
	#arrow-button1{
		position: relative;
        left: -5px;
		border: 1px solid #fff;
	}

	#arrow-button2{
		position: relative;
        left: -12px;
		border: 1px solid #fff;
	}

	.disabled {
	opacity: 0.3;
	pointer-events: none;
}	

#validateButton {
    position: relative;
	width: 70px;
	height: 22px;
    left: 20px; /* Ajuster selon vos besoins */
    top: 6px; 
    background-color: #aaa; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    border-radius: 5px;
    padding-top: 4px; !important;
    margin: 3px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #fff; /* Pour donner une bordure visible */
}

#refreshButton {
    position: relative;
	width: 35px;
	height: 22px;
    left: 20px; /* Ajuster selon vos besoins */
    top: 5px; 
    background-color: #aaa; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    border-radius: 5px;
    padding-top: 1px; !important;
    margin: 3px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #fff; /* Pour donner une bordure visible */
}

#startDateTime, #endDateTime, #lbl1, #lbl2 {
    position: relative;
    top: 5px; 
    left: 0px;
}

    .liserai1-or {
		position: relative;
		left: 136px;
		top: -10px; 
        border: 1px solid #D6B600;
        padding: 2px;  /* Espace entre le bord et le contenu */
		border-radius: 5px;
		margin: -9px;
		margin-top:-17px;
		width: 352px;
    }

    .liserai1-sel-1 {
		position: relative;
		left: 5px;
		top: 11px; 
		border: 1px solid #D6B600;
        padding: 2px;  /* Espace entre le bord et le contenu */
		border-radius: 5px;
		margin: -9px;
		margin-top:-17px;
		width: 123px;
		height:32px;
    }

</style>
