/*
hsla

Hue -
     0 = red
   120 = green
   240 = blue

Saturation
     0% gray
   100% full color

Lightness
       0% Black
      50% Normal
     100% White

Alpha
     0 Fully Transparent
     1 Fully Opaque

 HSL Picker
 http://hslpicker.com/#4d897c


*/
:root{
    --root: 225; /*our base color*/
    --comp:55;

    --html_bg:black;
    --body_bg:hsla(var(--root),30%,50%,1);

    --dialog_bg:hsla(var(--root),30%, 50%,1);

    --body_darker:hsla(var(--root), 28%, 20%, 1);
    --body_lighter:hsla(var(--root), 28%, 50%, 1);

    --page_bg: hsla(var(--root),34%,60%,1);
    --page_bg:hsla(var(--comp),24%,70%,.51);

    --tr_emphasize: hsla(var(--root),25%,50%,1);

    --content_bg:hsla(var(--root), 28%, 70%, 1);

    --worklist_bg: var(--body_bg);

    --header_bg:hsla(var(--root),40%,30%,1);

    --border:hsla(var(--root),89%,40%,1);

    --div1_bg:hsla(var(--root), 28%, 70%, 1);
    --div2_bg:hsla(var(--root), 28%, 50%, 1);

    --menu_bg:hsla(var(--root), 45%, 60%, 1);

    --footer_bg:hsla(var(--root), 52%, 70%, 1);

    --sub_bg :hsla(var(--root),40%, 50%,1);
    --select_bg :hsla(var(--root),40%, 30%,1);
    --pmain_bg:hsla(var(--root), 52%, 47%, 1);

    --tr_even: hsla(var(--root), 30%, 55%, 1);

    --tr_odd: hsla(var(--root), 52%, 70%, 1);

    --tr_hilight: hsla(var(--root), 62%, 50%, 1);

    --testborder: 3px solid navy;

    --crimson : hsla(311, 100%, 71%, 1);
    --navy : hsl(230, 100%, 39%);

    --hilight : hsla(2, 52%, 47%, 1);

    --tdcolor:whitesmoke;
}



html{
    background: black;
    height:99%;
    width:100%;
   /* max-height: 1080px;
    max-width:1920px;*/
    margin:0;
    padding:0;
    background:var(--html_bg);
}

body{
    height:99%;
    width:100%;
    /*max-height: 1080px;
    max-width:1920px;*/
    margin:0;
    padding:0;
    background:var(--body_bg);
   /* max-height: 1080px;
    max-width:1920px;*/
    background:var(--body_bg);
}

div.notes,
div.worklist,
div.ttimes,
div.dinner,
div.games,
div.collector{
    height:99%;
    margin-top:.5%;
    width:99%;
    margin-left:.5%;
    background:var(--page_bg);
}

*{
    font-family: arial, sans-serif;
    box-sizing: border-box;
    border-collapse: collapse;
}

.navy{
    color:var(--navy);
}

.navy_bg{
    background:var(--navy);
}

.crimson{
    color:var(--crimson)
}

.crimson_bg{
    background : var(--crimson);
}


p.locale{
    color:wheat;
    font-style: italic;
    border:2px solid navy;
    padding:.4em;
    background: cadetblue;
    margin-right:1em;
}



.div-header,
.header{
    width:100%;
    height:5%;
    min-height:4vh;
    background:var(--header_bg);
    display: grid;
    place-items: center;
    color:whitesmoke;
    font-size: 1.25vw;
}
/*
div.dialog div.body{
    width:100%;
    height:95%;
    background: orange;
    color:whitesmoke;
    font-size: 1.5vw;
}*/

tr:nth-child(even){
    background:var(--tr_even);

}

tr:nth-child(odd){
    background:var(--tr_odd);

}

tr.pairing:nth-child(odd){
    background:green;
}

table{
    margin-left:1%;
    width:98%;
    line-height:1.8;
}

td.uniq{
    display:none;
}


button{
    /*border-radius:.5em;
    box-shadow:3px 3px 3px  navy;*/
}

button:hover{
    box-shadow:3px 3px 3px  blue;

}

button:active{
    background: silver;
}