/* SCATTER PLOT CSS */

/* Main Dash page div that holds the scatter plot */
#main_dash_scatter_div {
    height: 100%;
    border-radius: 10px;
}

/* Card holding the scatter plot */
#scatter_plot_card {
    border-radius: 10px;
    overflow: hidden;
}

/* Div holding scatter plot and additional buttons */
#scatter_plot_div {
    margin-top: 10px;
    position: relative;
    height: 100%;
    width: 98%;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 5px 5px 5px lightblue;
}

/* Scatter plot graph */
#scatter_plot {
    width: 100%;
    height: 60vh;
}

/* Responsive styles for scatter_plot_div */
@media screen and (max-width: 950px) {
    #scatter_plot_div {
        width: 96%;
        margin: 20px 20px 10px 10px; /* top right bottom left */
    }
}

/* LINE PLOT CSS */

/* Line plot graph */
#line_plot {
    width: 100%;
    height: 50vh;
}

#line_plot_div {
    position: relative;
    margin: 20px 0 10px 0;
    border-radius: 10px;
    overflow: hidden;

    border: 1px solid #ccc;
    box-shadow: 5px 5px 5px lightblue;
    font-family: 'Calibri', sans-serif;
}

/* Responsive styles for line_plot_div */
@media screen and (max-width: 950px) {
    #line_plot_div {
        margin: 10px 20px 10px 10px;
    }
}

/* PROFILE ENVELOPE CHECKLIST */

#Range_plot {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 140px;
    height: 25px;
    z-index: 100;
    border-radius: 15px;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 5px lightblue;
    padding: 5px 5px 8px 8px;
    font-size: 15px;
    font-family: 'Calibri', sans-serif;
}

/* Responsive styles for Range_plot */
@media screen and (min-width: 951px) and (max-width: 1400px),
       screen and (max-width: 950px) {
    #Range_plot {
        top: 35px;
        width: 120px;
        font-size: 13px;
    }
}

/* ERROR BAR PLOT CSS */

#error_bar_dropdown_holder-div {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 130px;
    height: 35px;
    z-index: 100;
}

@media screen and (min-width: 951px) and (max-width: 1400px) {
    #error_bar_dropdown_holder-div {
        top: 35px;
    }
}

@media screen and (max-width: 950px) {
    #error_bar_dropdown_holder-div {
        top: 35px;
        right: 10px;
        left: auto;
    }
}

#error_plot {
    width: 100%;
    height: 50vh;
}

#error_bar_plot_div {
    position: relative;
    margin: 10px 0 10px 0;

    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 5px lightblue;
    padding: 5px 5px 8px 8px;
    font-size: 13px;
    font-family: 'Calibri', sans-serif;
    overflow: hidden;
}

/* Responsive styles for error_bar_plot_div */
@media screen and (max-width: 950px) {
    #error_bar_plot_div {
        margin-left: 10px;
        margin-bottom: 0;
    }
}

/* INDIVIDUAL PLOTS */

#individual_plot_card {
    border-radius: 10px;
    overflow: hidden;
}

#individual_csa_chart {
    width: 100%;
    height: 50vh;
}

#individual_cpa_plot_div {
    position: relative;
    margin: 20px 20px 10px 0;
    border-radius: 10px;
    overflow: hidden;

    box-shadow: 5px 5px 5px lightblue;
    font-family: 'Calibri', sans-serif;
}

/* Responsive styles for individual_cpa_plot_div */
@media screen and (max-width: 950px) {
    #individual_cpa_plot_div {
        margin: 10px 20px 0 10px;
    }
}

/* DARK MODE STYLES */

.dark-mode #scatter_plot_div,
.dark-mode #line_plot_div,
.dark-mode #error_bar_plot_div,
.dark-mode #Range_plot,
.dark-mode #individual_cpa_plot_div {
    box-shadow: 5px 5px 5px black;

}