/* Couleurs pour le dropdown de l'année */
#annee-dropdown .Select-value-label {
    color: tomato !important;
}    

#annee-dropdown .Select-control {
    background-color: white !important;
    color:rgb(156, 93, 81);
}

/* Couleurs pour le menu déroulant */
#annee-dropdown .Select-menu-outer {
    background-color:  rgb(156, 93, 81, 0.7) !important;
    color: white;
}

/* Styles pour le dropdown de la région */
#region-dropdown .Select-value-label {
    color: rgb(155, 40, 20) !important;
    background-color:  rgba(255, 137, 113, 0.3);
    border: 1px solid rgba(255, 102, 0, 0.534) !important; 
}    

#region-dropdown .Select-control {
    background-color: white !important;
}  

/* Couleurs pour le menu déroulant */
#region-dropdown .Select-menu-outer, 
#departements-dropdown .Select-option {
    background-color: rgb(156, 93, 81, 0.7);
    color: white;
}  

/* Couleurs pour l'icône de la région dropdown */
#region-dropdown .Select-value-icon {
    color: tomato !important;  
    border: 1px solid rgba(255, 102, 0, 0.534) !important; 
}

/* Styles pour le dropdown du département */
#departements-dropdown .Select-value .Select-value-label {
    color:  rgb(155, 40, 20) !important;
    background-color:  rgba(255, 137, 113, 0.3);
    border: 1px solid rgba(255, 102, 0, 0.534) !important;  
}

#departements-dropdown .Select-control {
    background-color: white !important;
}

#departements-dropdown .Select-value-icon {
    color: tomato !important;  
    border: 1px solid rgba(255, 102, 0, 0.534) !important; 
}

#departements-dropdown .Select-menu-outer {
    background-color: rgb(156, 93, 81, 0.7) !important;
    color: white;
}

/* Styles pour d'autres dropdowns (tl, te, nom_departement) */
#tl .Select-value .Select-value-label,
#te .Select-value .Select-value-label,
#nom_departement .Select-value .Select-value-label {
    color:  rgb(155, 40, 20) !important;
}

#tl .Select-control,
#te .Select-control,
#nom_departement .Select-control {
    background-color: white !important;
}

#tl .Select-menu-outer, 
#tl .Select-option,
#te .Select-menu-outer, 
#te .Select-option,
#nom_departement .Select-menu-outer, 
#nom_departement .Select-option {
    background-color: rgb(156, 93, 81, 0.7) !important;
    color: white !important;
}

/* Styles pour la barre de navigation */
.rounded-navbar .nav-link {
    color: tomato;
}

.rounded-navbar .nav-link.active {
    color: white !important;
    background: linear-gradient(to bottom, tomato, rgb(155, 40, 20)) !important;
}

/* Styles pour les boutons */
.custom-button {
    background:  linear-gradient(to bottom, tomato, rgb(155, 40, 20)) !important;
    transition: transform 0.3s ease;
}

.custom-button:hover {
    transform: scale(1.1);
}

/* Styles pour les titres et textes */
.gradient-title {
    background: linear-gradient(to bottom,tomato, rgb(155, 40, 20));
    font-weight:bold;
    color: white;
    padding: 10px;
    text-align: center;
}

 #kpi1-value, #kpi2-value, #kpi1-reg-value, #kpi2-reg-value, #output-texte {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 35px;
    color: tomato;
}

#annonce-pred{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: white;
}

.sidebar-text, .sidebar-text2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-text {
    font-size: 30px  !important;
    color: #E83623 !important;
}

.sidebar-text2 {
    font-size: 25px  !important;
    color: #001649 !important;
}

.custom-h2-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 45px  !important;
    color: tomato;
    margin-bottom: 50px;
}

.custom-h3-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 24px  !important;
    color: rgb(226, 142, 127);
}