body {
    /*background-color: #f0f8ff; *//* Light blue background for the body */
}
input[type="text"], input[type="password"], input[type="number"] {
    background-color: #e6f7ff; /* Light background color for the input field */
  /*  border: 1px solid #ccc;    /* Subtle border color */
   /* padding: 8px; */
    border-radius: 4px;        /* Rounded corners */
}
.bigfont{
    font-size: xx-large;
    color:blue;
    font-weight:bold;
}
.red{
    color:red;
}
.bigred{
    color:red;
    font-weight:bold;
    font-size:large;
}
.blue{
    color:blue;
}
.bigblue{
    color:blue;
    font-weight:bold;
    font-size:large;
}
.gold{
    color:gold;
}
.biggold{
    color:gold;
    font-weight:bold;
    font-size:large;
}
.teal{
    color:teal;
}
.bigteal{
    color:teal;
    font-weight:bold;
    font-size:large;
}
.mediumturquoise{
    color:mediumturquoise;
}
.bigmediumturquoise{
    color:mediumturquoise;
    font-weight:bold;
    font-size:large;
}
.silver{
    color:silver;
}
.bigsilver{
    color:silver;
    font-weight:bold;
    font-size:large;
}


ul {
    list-style-type: none;
}
.logout-button {
    background-color: red;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.bigmediumturquoise {
    color: #40e0d0;
}
/* Optional: Adjusts the canvas container's width */
.chart-container {
    width: 100%;
    max-width: 800px; /* Adjust max-width as needed */
    margin: auto;
}
.login-button {
    background: linear-gradient(135deg, #4caf50, #2e7d32); /* Gradient from light to dark green */
    border: none; /* Removes default border */
    border-radius: 25px; /* Makes the button rounded */
    color: white; /* Text color */
    padding: 10px 20px; /* Adjusts padding for a more substantial button */
    font-size: 16px; /* Increases font size */
    font-weight: bold; /* Makes the text bold */
    cursor: pointer; /* Changes cursor to pointer on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    transition: background 0.3s ease, transform 0.2s ease; /* Smooth transition */
}

.login-button:hover {
    background: linear-gradient(135deg, #66bb6a, #388e3c); /* Changes gradient on hover */
    transform: translateY(-2px); /* Lifts the button slightly on hover */
}

.login-button:active {
    background: linear-gradient(135deg, #388e3c, #2e7d32); /* Darker gradient when clicked */
    transform: translateY(0); /* Resets the lift */
}