:root {
    --main-bg-color: #212121;

    --main-th-background-color: #303030;
    --main-tf-background-color: #383838;
    --main-tr-odd-background-color: #454545;
    --main-tr-even-background-color: #505050;

    --main-text-color: #cccccc;

    --main-button-background-color: #606060;
    --main-button-text-color: #cccccc;
    --main-button-border-size: 1px;
    --main-button-border-color: #707070;

    --hover-button-border-color: #999999;

    --current-button-border-color: #28a428;

    --disabled-button-text-color: #404040;
    --disabled-button-border-color: #404040;

    --active-name-button-background-color: #606060;
    --active-name-button-text-color: #cccccc;
    --active-name-button-border-color: #28a428;

    --inactive-name-button-background-color: #606060;
    --inactive-name-button-text-color: #909090;
    --inactive-name-button-border-color: #a42828;

    --active-label-text-color: #28a428;
}

body
{
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
}

FORM.table, DIV.table 
{
    display: table;
}

DIV.th
{
    display: table-header-group;
    background-color: var(--main-th-background-color);
    font-weight: bold;
}

FORM.tf, DIV.tf
{
    display: table-footer-group;
    background-color: var(--main-tf-background-color);
}

FORM.tr:nth-child(even), DIV.tr:nth-child(even)
{
    display: table-row;
    background-color: var(--main-tr-even-background-color);
}

FORM.tr:nth-child(odd), DIV.tr:nth-child(odd)
{
    display: table-row;
    background-color: var(--main-tr-odd-background-color);
}

SPAN.td, SPAN.title-td
{
    display: table-cell;
    text-align: center;
    padding: 5px 10px 5px 10px;
}

SPAN.title-td
{
    padding: 0px 10px 0px 10px;
}

.button, .active-button, .inactive-button, .active-label, .inactive-label, .current-button
{
    background-color: var(--main-button-background-color);
    color: var(--main-button-text-color);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 1px;
    border-radius: 5px;
    width: 100%;
    border: var(--main-button-border-size) solid var(--main-button-border-color);
    text-decoration: none;
    cursor: default;
    margin-bottom: 0px;
}

.button:hover, .active-button:hover, .inactive-button:hover, .current-button:hover
{
    border: var(--main-button-border-size) solid var(--hover-button-border-color);
    color: var(--main-button-text-color);
    text-decoration: none;
}

.button[disabled]
{
    color: var(--disabled-button-text-color);
    border: var(--main-button-border-size) solid var(--disabled-button-border-color);
    cursor: not-allowed;
    pointer-events: none;
}

.active-button, .active-label
{
    background-color: var(--active-name-button-background-color);
    color: var(--active-name-button-text-color);
    border: var(--main-button-border-size) solid var(--active-name-button-border-color);
}

.inactive-button, .inactive-label
{
    background-color: var(--inactive-name-button-background-color);
    color: var(--inactive-name-button-text-color);
    border: var(--main-button-border-size) solid var(--inactive-name-button-border-color);
}

.current-button
{
    border: var(--main-button-border-size) solid var(--current-button-border-color);
}

.nav-button
{
    width: 10%;
    margin: 5px;
}

.nav-button-right
{
    width: 10%;
    margin: 5px;
    float: right;
}

.logout-form
{
    display: inline;
}

.logout-button
{
    width: auto;
    margin: 5px;
    float: right;
    padding-right: 10px;
    padding-left: 10px;
}

.nav-row
{
    background-color: var(--main-tr-odd-background-color);
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.nav-title, .nav-title-head
{
    width: 15%;
    padding: 5px 10px 0px 10px;
    display: inline-block;
    text-align: center;
}

.nav-title-head
{
    width: 100%;
}

.nav-label-right
{
    padding: 5px 10px 0px 10px;
    display: inline-block;
    text-align: right;
    float: right;
}

.nav-label-active
{
    color: var(--active-label-text-color)
}

.textbox, SELECT
{
    background-color: var(--main-text-color);
}

.th-filter-label
{
    display: inline;
    margin-left: 30%;
}

.th-filter-select
{
    display: inline;
    margin-left: 5%;
}