/* CSS for the light green background */
.light-green-background {
    background-color: #dfdef5;
    position: relative;  /* Needed for absolute positioning of child elements */
}

.background-website {
    background-color: #d4fbe2;
    position: relative;  /* Needed for absolute positioning of child elements */
}


.light-white-background {
    background-color: #fff;
    position: relative;  /* Needed for absolute positioning of child elements */
}

/* CSS for the GOOD CREDIT label */
.good-credit-label {
    position: absolute;
    bottom: 10px; /* Distance from the bottom */
    right: 10px;  /* Distance from the right */
    background-color: rgba(0, 104, 25, 0.97); /* Optional: semi-transparent background for better readability */
    color: white; /* Text color */
    padding: 2px 5px;
    font-size: 0.35rem; /* Smaller font size */
    border-radius: 3px; /* Rounded corners for the label */
}

/* CSS for website label */
.red-label {
    position: absolute;
    bottom: 10px; /* Distance from the bottom */
    right: 10px;  /* Distance from the right */
    background-color: rgba(0, 104, 25, 0.97); /* Optional: semi-transparent background for better readability */
    color: white; /* Text color */
    padding: 2px 5px;
    font-size: 0.35rem; /* Smaller font size */
    border-radius: 3px; /* Rounded corners for the label */
}

.yellow-label {
    position: absolute;
    bottom: 10px; /* Distance from the bottom */
    right: 10px;  /* Distance from the right */
    background-color: rgba(242, 203, 59, 0.97); /* Optional: semi-transparent background for better readability */
    color: black; /* Text color */
    padding: 2px 5px;
    font-size: 0.35rem; /* Smaller font size */
    border-radius: 3px; /* Rounded corners for the label */
}

/* CSS for the Stellantis logo */
.stellantis-logo {
    max-width: 180px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 10px;
}

/* CSS for the dashboard heading */
.dashboard-heading {
    font-size: 2rem;
    font-weight: bold;
    color: #243882; /* Customize color as needed */
    margin: 0;
}

/* CSS for the dashboard subtitle */
.dashboard-subtitle {
    font-size: 1rem;
    color: #666565; /* Customize color as needed */
    margin-top: 0;
    
}

/* CSS for lead number */
.lead-counter {
    font-weight: bold; 
    color: red;
    
}

.lead-counter-total {
    font-weight: bold; 
    color: #fff;
    font-size: 0.8rem;
    

}

/* CSS for lead number */
.lead-source {
    font-weight: bold; 
    font-size: 0.6rem;
    
}

/* CSS for lead counter time */
.lead-counter-time {
    font-weight: bold; 
    font-size: 1.2rem;
    color: #243882;
    
}

/* CSS for the model labels */
.model-label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.0rem; /* Increase font size for better visibility */
    color: #fff; /* Darker color for better contrast */
    margin-bottom: 10px; /* Space below the label */
    background-color: rgba(36, 56, 130, 1); /* Optional: semi-transparent background for better readability */
    padding: 2px 5px; /* Padding to make space for the underline */
}

.footer {
   
    bottom: 0;
    max-width: 100%;
    padding-right: 60px;
    padding-left: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #8e8e8e;
    color: #fff;
}

.footer small {
    font-size: 11px;
}

/*Legend*/
.source-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.legend-block {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border-radius: 3px;
}

.blue {
    background-color: #0601c2; /* Green for Facebook */
}

.green {
    background-color: #009b38; /* Red for Website */
}

.yellow {
    background-color: #f2cb3b; /* Red for Website */
}