:root
{
    --color-background: #D8E8DE;
    --color-footer: #2D364C;
    --color-shadow: #367C57;
    --color-title: #109046;
    --color-dialog-title: #33A062;
    --color-dialog-original: #6BB189;
    --color-dialog: #97C7AB;
    --color-dialog-button: #109046;
    --color-dialog-button-action: #33A062;
    --color-dialog-button-action-active: #367C57;
    --color-dialog-button-action-disabled: black;
    --color-dialog-button-border: #367C57;
    --color-dialog-background: white;
    --color-background-modal: slategrey;
    --color-table-checked-odd: #8e96d6;
    --color-table-checked-even: #bdc0d3;
    --color-error: darkred;
    --color-button-login: #367C57;
    
}

body
{
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--color-background);
}

html
{
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--color-background);
}

/*
    Main Elements
*/
.header
{
    transition: background-color .5s;
    position: relative;
}

.header-logo-img
{
    max-height: 85px;
    transition: all .5s;
    width: auto;
}

.header-controls-global
{
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 0px 8px 2px 8px;
}

.header-controls-local
{
    position: absolute;
    right: 0px;
    top: 46px;
    margin: 2px 8px 2px 8px;
}

.header-controls-local img
{
    margin-left: 8px;
}

.header-title
{
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
}

.header-title p
{
    margin: 0px;
    font-weight: bold;
}

.content
{
    height: calc(100vh - 89px - 50px - 10px);
    margin-top: 10px;
    overflow: auto;
}

.footer
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 35px;
    background-color: var(--color-footer);
    transition: background-color .5s;
}

.footer-controls-global
{
    position: absolute;
    top: 1px;
}

.footer-logo
{
    position: absolute;
    top: 5px;
    right: 15px;
}

.footer-logo-img
{
    position: relative;
    max-height: 25px;
    width: auto;
}

/*  Buttons */
button:disabled
{
    background-color: lightgray;
    color: darkgray;
    border: 1px solid var(--color-dialog-button-action-disabled);
}

button:hover
{
    box-shadow: 0 0 6px var(--color-shadow);
}

button:active
{
    background-color: var(--color-dialog-button-action-active);
}

.form-control {
    margin: 0.5vmin 2.5vmin 0px 2.5vmin;
    width: auto;
    height: 4vh;
    font-size: max(1.5vh, 12px);
    cursor: pointer;
    background-color: var(--color-background);
    border: 1px solid var(--color-dialog-title);
}

/*Table*/
td input[type="checkbox"], td input[type="radio"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}

table.tablesorter tbody tr.odd.checked td {
    background: var(--color-table-checked-odd);
    font-style: italic;
}
table.tablesorter tbody tr.even.checked td {
    background: var(--color-table-checked-even);
    font-style: italic;
}