@import "style.css";
@import "light_dark_mode.css";
@import "notice.css";
@import "filters.css";

/* Start Chart page setup */
.chartspage{
    padding: 15px 15px 0px 15px;
}
.charts{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.chart-wrap{
    background: var(--c-fg);
    border-radius: 15px;
    padding: 15px;
    overflow: scroll;
    max-width: min-content;
}
.chart-scroll{
    margin-top: 15px;
    overflow: scroll;
}
.chartBox canvas{
    width: 600px!important;
}

/* Custom layout for Filters */
.filter-options{
    display:flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 15px 0 0 15px;
}
/* when replacing select arrow */
select#chart-epochs{
    -moz-appearance:none; 
    -webkit-appearance:none; 
    appearance:none;
    background: var(--arrow-select);
    background-position: calc(100% - 3px);
    background-size: 18px 18px;
    border: 1px solid var(--c-b-select);
    padding: 7px 21px 6px 10px;
    background-color: var(--c-fg);
    color: var(--c-text-m);
    border-radius: 7px;
    outline: none;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    height:28px;
    cursor: pointer;
    float: right;
}