@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url("style/reset.css");
@import url("style/elements.css");
@import url("style/header.css");
@import url("style/layout.css");
@import url("style/pagination.css");
@import url("style/dashboard.css");
@import url("style/calendar.css");
@import url("style/popup.css");
@import url("style/datetimepicker.css");

:root {
    --colour-primary: #27303a;
    --colour-primary-light: #414c55;
    --colour-primary-lighter: #5c6269;
    --colour-primary-lightest: #838f9a;
    --colour-primary-slightly-darker: #222c36;
    --colour-primary-darker: #1e2832;
    --colour-primary-darkest: #15202a;
    --colour-primary-accent: #07829e;
    --colour-primary-accent-lighter: #6fdcfa;

    --colour-text: #9c9fa2;
    --colour-text-lighter: #dddedf;
    --colour-text-accent: #ffffff;

    --colour-positive-darker: #00af5b;
    --colour-positive: #00d46d;
    --colour-negative-darker: #b89a00;
    --colour-negative: #e9c200;

    --colour-red: #dc3737;
    
    --colour-grey-10: #ebeced;
    --colour-grey-20: #d7d8da;
    --colour-grey-30: #c4c6c9;
    --colour-grey-50: #7a7d81;

    --page-max-width: 1740px;
    --page-side-padding: 20px;

    --font-family: 'Roboto', sans-serif;
}

a {
    color: var(--colour-primary-accent);
    transition: .3s;
}

.total {
    color: var(--colour-primary-accent);
}

body {
    min-width: 360px;
    color: var(--colour-text);
    font-weight: 400;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1;
    background: var(--colour-primary-darkest);
}

button {
    transition: .3s;
}

button:focus {
    outline: none;
}

.custom-chart-size {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 80px;
    width: 100%;
    margin: auto;
}


.-chart > .gain-loss-pie-chart {
    max-width: 122px;
    max-height: 122px;
    width: 122px;
    height: 122px;
}

.gain-loss-pie-chart {
    width: 80px;
    height: 80px;
}

#timeofday_column {
    height: 260px;
}

#dayofweek_column {
    height: 260px;
}

.visual-stats-graph {
    width: auto;
    height: 24vh;
}

.visual-stats-graph > div {
    min-height: 20%;
}