button {
    background-color: #1E90FF;  /* Cyan */
    #background-color: #40C4D8;  /* Cyan */
    border: none;
    #color: #ffffff;  /* Dark blue */
    color: white;  /* Dark blue */
    padding: 5px 10px;
    #font-size: 16px;
    font-family: Arial, sans-serif;
    border-radius: 4px;
    border-color: #00ffff;
    border: 1px solid #1A98E0;
    cursor: pointer;
    margin-top: 10px;
    font-size: 1em;
}

.button:hover {
    background-color: #00cccc;  /* Darker cyan */
    color: #002244;  /* Darker blue */
}






/* General card styles */
.card-header {
    background-color: #607D8B;  /* Blue Gray */
    color: white;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 8px 8px 0 0;
}

.white-background {
    background-color: #FFFFFF !important; /* White background */
    padding-top: 0px !important;
}

.card-body {
    background-color: #ECEFF1;  /* Light blue gray */
    #background-color: "#D8DEE9";  /* Light blue gray */
    font-family: Arial, sans-serif;
    padding: 20px;
}

.paragraph {
    overflow-y: auto;
    height: 100%;
    padding: 10px;

}

.input {
    padding: 5px;
    background-color: #fefefe;
    #border: none;
    border: 1px solid #ccc;  
    padding-left: 1.25em; 
}

.input[type="text"]:hover {
    border: 2px solid blue; /* Blue border on hover */
}


.content {
   background-color: white;
}

/* Define responsive font sizes using viewport units */
.dash-graph .responsive-plotly-title {
    font-size: 3vh !important;  /* Font size as a percentage of viewport height */
}
.dash-graph .responsive-plotly-legend, .responsive-plotly-axis {
    font-size: 2vh !important;  /* Font size as a percentage of viewport height */
}
.dash-graph .responsive-plotly-annotations {
    font-size: 1vh !important;  /* Font size as a percentage of viewport height */
  
}