:root{
    --primary-color: #005daf; /* Declaring a CSS variable */
    --primary-color-darker: #07579d; /* Declaring a CSS variable */
}

@font-face {
  font-family: 'Droid Sans'; /* set name */
  src: url('/css/DroidSans.ttf'); /* url of the font */
}

html,table {
    font-family: 'Droid Sans', sans-serif;
    font-size:10pt;
}
page-wrapper{
    position:fixed;
    left:0pt;
    top:0pt;
    height:100%;
    width:100%;
    display:flex;
    flex-direction: row;
}

:is(h1,h2){
    background-image: linear-gradient(to bottom, var(--primary-color), var(--primary-color-darker));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bolder;
    font-size: 200%;
}

sidebar {
    box-shadow: 0pt 0pt 2pt;
    background-color: var(--primary-color);
    background-image: linear-gradient(0deg, #00000080, transparent 50%);
    display:flex;
    flex-direction: column;
    flex:0;
    width:200pt;
    row-gap:5pt;
    padding:10pt 5pt;
}
sidebar button{
    width:100%;
    flex:0;
}

toolbar{
    padding-top:5pt;
    padding-bottom:5pt;
}

:is(sidebar,toolbar) :is(button,input[type="submit"]){
    text-align: left;
    color: var(--primary-color);
    font-weight: bolder;
    padding-top: 3pt;
    padding-bottom: 3pt;
    border: 1pt solid var(--primary-color);
    border-radius: 2pt;
}

:is(button) > *{
    pointer-events: none;
}

:is(button) svg{
    vertical-align: middle;
    fill:var(--primary-color)
}

page table thead td{
    background-color: var(--primary-color);
    color:white;
}

page table td{
    padding:5pt 4pt;
}

page table td{
    border:1px solid lightgray;
}




column{
    display:flex;
    flex-direction:column;
    row-gap:2pt;
}
column > *{
    flex:1;
}

row {
    display:flex;
    flex-direction:row;
    column-gap:2pt;
    row-gap:2pt;
}
row > *{
    flex:1;
}