@charset "utf-8";
/*	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 	Resource:	todayvyest.css      | Ver:5.0.0
 * 	Author:		DNC Thomas          | Feb 2026
 *  Created:    2025-08-20
 * 	Last Edit:  2026-02-05 09:41:05
 *	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 	Role:	Page specific styles
 * 	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

 html {
    --valueWidth: 11em; /* Change this value to make the data culumns wider / narrower */
    --borderPadding: .35em;
 }

.ow-dataBar3col {
    margin:.2em -.5em;
    padding:.2em .5em;
    display:grid;
    column-gap: .2em;
    grid-template-columns: 1fr repeat(2, var(--valueWidth));
    grid-template-areas: "heading today yesterday";
    align-items: center;
    & p { margin:0.1em 0em;}
    & .heading { grid-area:heading;}
    & .today { 
        grid-area:today; 
        border-radius: .5vh;
        border-left: .4vw solid var(--color7);
        padding-left: var(--borderPadding);
    }
    & .yesterday{ 
        grid-area: yesterday;
        border-radius: .5vh; 
        border-right: .4vh solid var(--color7);
        padding-right: var(--borderPadding);
    }
    & p:last-of-type{ text-align:right;}
}

.ow-dataBar3col:hover {
    background: var(--gradient-databar);
    color: var(--color3);
    & p:not(:first-child) { font-weight: 700;}
}

.ow-titleBar3col {
    /* Any number of items as long as they fit on one row  */
    margin: 0 -1em 1vh;
    padding: 0 1em;
    display:grid;
    column-gap: .2em;
    align-items:last baseline;
    grid-template-columns: 1fr repeat(2, var(--valueWidth) );
    /*column-gap: var(--colGap);*/
    & * { margin:0;}
    & p { margin:0; font-weight: 500;}
    & p:nth-of-type(1) { padding-left:.75em;}
    & p:last-of-type { text-align:right; padding-right: .75em}
}