header {
    text-align: center;
}

div.Menu {
    display: flex;   
    justify-content:safe;
    flex-direction: row;    
    border: 2px solid black;
    background-color: lightgray;    
}
div.Menu > div {    
    /* display: inline-block; 
    margin: 0 10px;    
    */
    border: 1px solid black;
}

div.Menu > div:last-child {           
    text-align: end; align-self: end; margin-left: auto;
}

dialog > h1, dialog > h2, dialog > h3, dialog > h4, dialog > h5 {
    text-align : center;
}

blockquote
{
    border: 1px dashed;
}

div.Waveform
{
    display: block;
    overflow-y: hidden;
    width:100%;
    height: fit-content;
    border: solid 2px;
    resize: vertical;
}

table#ToneTable  td
{
    text-align: center;
}
/*
div.BalloonHelp:hover {
    transition-delay: 1s;
    position: absolute;
    background-color: lightyellow;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    cursor: pointer;
}
*/

/* 
div.BalloonHelp:hover:after {
    content: "";
    position: relative;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #FFFFFF transparent transparent transparent;
    top: 0px;
    left: 0px;
}
*/

table.MediaReferences > tbody > tr > td
{
    text-align: center;
}

table.MediaReferences > tbody > tr > td:nth-child(4)
{
    text-align: center;
    font-size: x-small;
}

/**
REFERENCES
- https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size
*/
div.BalloonHelpContext
{
    
}
div.BalloonHelp 
{
    display: inline-block;
    --BalloonHelp-width: calc-size(width);
}
div.BalloonHelpMessage 
{
    visibility: hidden;
    display : inline-block;
    position: absolute;
    width: fit-content;
    height: fit-content;
    background-color: lightyellow;
    border: solid 1px black;    
    z-index: 1000;         
    padding: 4px;;
    left:calc(var(--BalloonHelp-width)) px; 
    /* 
    border-color: #FFFFFF transparent transparent transparent;
    left: 50px;
    left:calc(var(--BalloonHelp-width)) px; 
    */
}

div.BalloonHelpMessage a
{
    display: block;
}

div.Reference
{
    border: 1px dashed black;
}

div.Panel
{
    border: 2px solid black;    
}

div.Panel#BoxBreathingPanel
{
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: hidden;

    width:100%;     
    border: solid 2px;
    resize: vertical;
}

/**
* REFERENCES
*   - https://stackoverflow.com/questions/59571924/how-to-change-a-css-checkbox-label-icon-when-checked-without-javascript
*/
#BBPlayPauseStop input
{
    /* display: none; */
}
#BBPlayPauseStop input + label:before
{
    content: "\1f3a4";
    background-color: lightgray;
    border: 1px solid black;
}


#BBPlayPauseStop input:checked + label:before
{
    content: "\1f3a4";    
    background-color: darkgray;
    border: 1px solid black;
    //background-color: skyblue;
}

div.Panel#BoxBreathingPanel > div:first-child
{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-self: center;
    justify-items: center;
    align-items: center;
    background-color: black;
}
div.Panel#BoxBreathingPanel > div:first-child > canvas
/*, div.Panel#BoxBreathingPanel ~ svg */
{
    flex-grow: 1;
    background-color: black;
    width: 100%;
}

details#BoxBreathingSettings > div
{
    border: 2px solid black;
}

details#BoxBreathingSettings > div > label > span
{
    display: inline-block;
    width: 2em;
    text-align: right;
}

#BreathState 
{
    display: flexbox;
    flex-direction: row;         
}
#BreathState > span:nth-child(1)
{        
    /* text-align: center; */
    align-self: center; 
    width: 20em; 
    /** align-self: flex-end; */
}

#BreathState > span:nth-child(2)
{    
    width: 3em; 
    color: lightgray; 
    align-self: flex-end;
}

#AudioLoopPanel > div:first-child, #BoxBreathingPanel summary, #BBPlayPauseStop > div:first-child
{
    background-color: beige; 
    width: 100%;   
    border: 1px solid black;
    padding: 2px;
}

#AudioLoopPanel > div:nth-of-type(2)
{    
    width: 100%;   
    border: 1px solid black;
    padding: 1px;
}

div.AudioLoopControls
{
    display: flex;
    flex-direction: column;
    border: 1px dashed black;
    padding: 2px;
    align-items: center;    
    align-content: center;
    
}
div.AudioLoopControls > div:nth-of-type(1) 
{
    display: flex;
    flex-direction: row;
}
div.AudioLoopControls > div:nth-of-type(1) > *
{
    vertical-align: middle;
}
div.AudioLoopControls > span:nth-of-type(1)
{
    font-weight: bold;
    text-align: center;    
    align-self: center;    
    align-items: center;
}

div.Experiment1
{
    /* display: none; */
    display: block;
}

@media screen and (hover: hover) 
{
    
    div.BalloonHelp:hover
    {
        transition-delay: 2s;        
        cursor: help;
    }    
    div.BalloonHelp:hover div.BalloonHelpMessage 
    {
        transition-delay: 2s;
        transition-property: visibility;  
        visibility: visible;         
        /*
        position: relative;        
        */        
    }    
}

@media (pointer: coarse) 
{
div.BalloonHelp#PlayPauseStop:active > div.BalloonHelpMessage,
div.BalloonHelp#PlayPauseStop:focus > div.BalloonHelpMessage,
div.BalloonHelp#PlayPauseStop:hover > div.BalloonHelpMessage
{
    transition-delay: 2s;
    transition-property: visibility;
    /* content: "Toggle playing sound on and off"; */
    visibility: visible;   
    position: absolute;
    left: 125px;
}

div.BalloonHelp:hover > input#Volume ~ div.BalloonHelpMessage {
    transition-delay: 2s;
    transition-property: visibility;  
    visibility: visible;  
    position: absolute;
    left: 225px; 
    /*top: -20px;  
    left: 100px; 
    */
    /*
    padding: 0px;
    margin: 0px;
    */
}

div.BalloonHelp:hover > input#BeatRangeHz  ~ div.BalloonHelpMessage {
    transition-delay: 2s;
    transition-property: visibility;  
    visibility: visible;
    position: absolute;  
    left: 325px;   
    /* top: -20px;     */
}

div.BalloonHelp:hover > input#RangeHz  ~ div.BalloonHelpMessage {
    transition-delay: 2s;
    transition-property: visibility;    
    visibility: visible;
    position: absolute;   
    left: 300px;   
    /* top: -20px;    */
}

div.BalloonHelp:hover > input#CountDownTimer  ~ div.BalloonHelpMessage {
    transition-delay: 2s;
    transition-property: visibility;   
    visibility: visible;
    position: absolute;
    padding: 5px 0;
    left: 300px; 
    /* top: -10px;  */
    /* top: -20px;  */  
}
}


/**
my generic stuff.  
\todo [refactor] my commonly used personal CSS styles into git module that can be shared across projects
*/
div.Question
{
    display: block;
    border: 1px dashed black;
}

div.Question::before
{
    content:"[?] ";
    font-weight: bold;    
}

div.Question > span
{
    font-weight: bold;
    text-decoration: underline;
    background-color: aquamarine;
}
div.Question > p:nth-child(2)
{
    text-decoration: underline;
    background-color: aquamarine;
}