@charset "utf-8";
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Stylesheet: charts.css      | Version: 5.01
    Author:     DNC Thomas      | April 2026
    -------------------------------------------
    Last edit:  
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

#chartcontainer { 
    /*min-height:600px;*/
    display:grid; 
    grid-template-rows: 2em 45vh auto;
    row-gap: 1vh;
    margin-top:1vh;
    background: linear-gradient( 10deg, var(--color8), var(--color9));
    border: thin solid  var(--color5);
    padding: 1em;
}
#mainChartContainer {
    background:white;
}
#navChartContainer {
    height: 6em;
    padding-left:3em;
    background:white;
}
.err {
	border: 2px solid #f00;
   	box-shadow: var(--shadows);
    font-weight:700;
	text-align:center;
	margin:0 3em 1vh 3em;
  	padding: 0.5em 0.5vw;
}
#rangeButtons {
    display: flex; column-gap: .25em; align-items:baseline;
    height: 32px;
}
.chart-buttons {
    font-family: inherit;
    display:flex;
    font-size: 80%;
    color: var(--color9);
    justify-content: space-between;
}
.chart-buttons button {
    border-radius: 1em;
    border: thin solid var(--color5);
    padding: .2em 1em;
}
.chart-buttons button:hover {
    background: var(--gradient-down)!important;
    color: var(--color1);
    cursor: pointer;
}
.ow-selectBar {
    display:flex;
    gap: calc( var(--rowGap) / 4) var(--colGap); 
    flex-flow: row wrap;
    & .selectorGrid {
        display: grid;
        grid-template-columns: 8rem 2.3rem;
        grid-template-rows: 2rem;
        gap: 0px; /*  Increase this to make a gap between graph and colour buttons */
        grid-template-areas: "graph colour";
        font-size: 80%;
        & .selGraph:hover { background: var(--gradient-down);}
        & .selGraph {
            grid-area:graph; 
            border-radius: 1.2em 0 0 1.2em; 
            border-right: none;
            background-color: var(--color9);
            text-align:center;
        }
        & .selColor { 
            grid-area:colour; 
            border-radius: 0 1.2em 1.2em 0; 
            border-left: none;
        }
    }
}
select:hover { cursor: pointer;}