:root {
    --color-dark-bg: rgba(0, 0, 0, 0.6);
    --color-light-bg: rgba(0, 0, 0, 0.3);

    /* general purpose colors */
    --color-text: #dde;
    --color-white: #dde;
    --color-black: #666;
    --color-green: #28c030;
    --color-blue: #2070f0;
    --color-red: #dc3545;

    /* special purpose colors */
    --color-success-fg: #3d1c;
    --color-success-bg: #3d13;
    --color-modified-fg: #fb0c;
    --color-modified-bg: #fb03;
    --color-waiting-fg: #00fa;
    --color-waiting-bg: #00f3;
    --color-failed-fg: #f00a;
    --color-failed-bg: #f003;

    --color-modal-fg: #dde;
    --color-modal-bg: #333;
    --color-modal-shadow: #ddd;
}

@media (prefers-color-scheme: light) {
    :root {
        --color-dark-bg: rgba(0, 0, 0, 0.8);
        --color-light-bg: rgba(0, 0, 0, 0.4);
        --color-text: #332;

        --color-modal-bg: #fff;
        --color-modal-fg: #332;
        --color-modal-shadow: #111;
    }
}


body {
    background-color: #111;
    color: var(--color-text);
    margin: 0;
    padding: 0;
}
@media (prefers-color-scheme: light) {
    body {
    }
}

div#BodyDiv {
    background-color: #222f33;
    background-image: url("/rsc/img/background.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
}
@media (prefers-color-scheme: light) {
    div#BodyDiv {
        background-color: #fff;
        background-image: url("/rsc/img/background_light.png");
    }

}

/*div#bodybox {
    display: grid;
    grid-template-columns: auto;
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
}*/

input:focus, button:focus, button:hover {
    outline: 0.2em solid var(--color-green);
}

input:disabled, button:disabled {
    outline: none;
}

table {
    border-spacing: 1em 0.2em;
}

table tr td,
table tr th {
    padding: 0.4em 0.8em;
}

table tr:nth-child(even) td {
    background-color: var(--color-light-bg);
}

table tr:nth-child(odd) td {
    background-color: var(--color-dark-bg);
}

@media (prefers-color-scheme: light) {
    table tr:nth-child(even) td {
        background-color: #fff9;
    }

    table tr:nth-child(odd) td {
        background-color: #ddd9;
    }
}

/*****************************************************************************
                               BusySpinner
 *****************************************************************************/

div#BusySpinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0.5, 0.4, 0.4, 0.78);
    color: var(--color-white);
    display: block;
    align-content: center;
    text-align: center;
    display: none;
}

div#BusySpinner > div {
    display: block;
    font-weight: bold;
}

div#BusySpinner svg {
    width: 40%;
}
#BusySpinnerS1Fg, #BusySpinnerS1Bg,
#BusySpinnerS2Fg, #BusySpinnerS2Bg,
#BusySpinnerLBg, #BusySpinnerLFg,
#BusySpinnerOBg, #BusySpinnerOFg, #BusySpinnerORing,
#BusySpinnerRedTop, #BusySpinnerRedBottom {
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-timing-function:  ease-in-out;
    animation-iteration-count: infinite;
    animation-name: BusySpinnerAnimation;
}

#BusySpinnerS1Fg, #BusySpinnerS1Bg {
    animation-delay: 0ms;
}

#BusySpinnerS2Fg, #BusySpinnerS2Bg {
    animation-delay: 100ms;
}

#BusySpinnerLBg, #BusySpinnerLFg {
    animation-delay: 200ms;
}

#BusySpinnerOBg, #BusySpinnerOFg, #BusySpinnerORing {
    animation-delay: 300ms;
}

#BusySpinnerRedTop {
    animation-name: BusySpinnerAnimationRedTop;
}

#BusySpinnerRedBottom {
    animation-name: BusySpinnerAnimationRedBottom;
}

@keyframes BusySpinnerAnimation {
    0% {
        transform: scale(1.0) translate(0, 0);
    }
    70% {
        transform: scale(0.85) translate(6px, 17px);
    }
    100% {
        transform: scale(0.85) translate(6px, 17px);
    }
}

@keyframes BusySpinnerAnimationRedTop {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(1px, 0px);
    }
}

@keyframes BusySpinnerAnimationRedBottom {
    0% {
        transform: scale(1.0) translate(0, 0);
    }
    100% {
        transform: scale(0.99) translate(0, 1px);
    }
}




/*****************************************************************************
                                Header
 *****************************************************************************/

header {
    margin-top: 0;
    width: 100%;
/*     border-top-left-radius: 1em; */
/*     border-top-right-radius: 1em; */
    background-color: var(--color-dark-bg);
    color: var(--color-white);
}



/*****************************************************************************
                                Navigation
 *****************************************************************************/


nav {
    background-color: var(--color-dark-bg);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    color: var(--color-white);
}

div#NavbarMenu  *:focus {
    outline: 0.2em solid var(--color-white);
}

nav > div#NavbarLogo img {
    height: 3em;
    margin-right: 2em;
}

nav > div#NavbarMenu {
    display: flex;
    gap: 1em;
}

nav a {
    color: var(--color-white);
    font-weight: bold;
    font-size: 1.2em;
    padding: 0.25em 1em;
    text-decoration: none;
    white-space: nowrap;
}

nav > div#NavbarMenu > div > a:hover {
    background-color: var(--color-white);
    color: var(--color-dark-bg);
    border-radius: 0.2em;
}

nav > div#NavbarMenu > div.NavbarDropdown > div {
    display: none;
    position: absolute;
    background-color: var(--color-white);
}

nav > div#NavbarMenu > div.NavbarDropdown > div > a {
    display: block;
}

nav > div#NavbarMenu > div.NavbarDropdown > div > a:hover {
    text-decoration: underline;
}

nav > div#NavbarMenu > div.NavbarDropdownActive a {
    background-color: var(--color-white);
    color: var(--color-dark-bg);
    border-radius: 0.2em;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

nav > div#NavbarMenu > div.NavbarDropdownActive > div {
    display: block;

    /* Unfortunately, does not work :-/  */
    border-bottom-right-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
}

nav > div > div.NavbarLogin > a {
    background-color: var(--color-green);
    border-radius: 0.2em;
}

nav > div > div.NavbarLogin > a:hover {
    background-color: var(--color-green);
}

nav > div#NavbarMenu > div.NavbarDropdownActive #NavitemLogout {
    color: var(--color-red);
    font-weight: bold;
}



/******************************************************************************
                              Breadcrumps
 *****************************************************************************/

breadcrumps {
    display: block;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    padding-left: 2em;
    margin-bottom: 1em;
    text-align: left;
    background-color: var(--color-light-bg);
    color: var(--color-red);
}
@media (prefers-color-scheme: light) {
    breadcrumps {
        color: var(--color-red);
    }
}

breadcrumps > a {
    font-size: 0.8em;
    font-style: italic;
    color: #ddd;
    display: inline-block;
    text-decoration: none;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
@media (prefers-color-scheme: light) {
    breadcrumps > a {
        color: var(--color-white);
    }
}

breadcrumps > a:hover {
    text-decoration: underline;
}

breadcrumps > a:last-child {
    padding-right: 0;
}

breadcrumps > a:first-child {
    padding-left: 0;
}



/*****************************************************************************
                                Messages
 *****************************************************************************/

messages {
/*     display: block; */
/*     text-align: center; */
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
/*     width: 40em; */
    max-width: max-content;
}

messages > div {
    margin-top: 1.0em;
    border-radius: 0.7em;
    border: 0.2em solid;
    padding: 0.5em 1em;
/*     margin-left: auto; */
/*     margin-right: auto; */
/*     display: block; */
/*     width: max-content; */
/*     width: max-content; */
    flex: auto;
    text-align: center;
}

messages > div.MessageError {
    background-color: rgba(255, 100, 100, 0.3);
    border-color: rgba(255, 100, 100, 0.8);
}

messages > div.MessageWarning {
    background-color: rgba(255, 255, 100, 0.3);
    border-color: rgba(255, 255, 100, 0.8);
}

messages > div.MessageSuccess {
    background-color: rgba(100, 255, 100, 0.3);
    border-color: rgba(100, 255, 100, 0.8);
}

messages > div > div.Label {
    font-weight: bold;
    text-decoration: underline;
}


/*****************************************************************************
                                Main Body
 *****************************************************************************/

main {
    /*padding: 1em;*/
    /*background-color: var(--color-light-bg);*/
    /*color: #eee;*/
/*     width: 80%; */
/*    max-width: max-content;*/
/*    margin-top: 2em;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*    margin-bottom: 1em;*/
/*    border-radius: 0.5em;*/
}

.BgBox {
    padding: 1em;
    background-color: var(--color-light-bg);
    color: #eee;
    width: 80%;
    /*max-width: max-content;*/
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    border-radius: 0.5em;
}
@media (prefers-color-scheme: light) {
    .BgBox {
        background-color: #fffa;
        color: #333;
        border-radius: 00;
    }
}

/*****************************************************************************
                                Footer
 *****************************************************************************/

footer {
    margin-top: 2em;
    padding-bottom: 3em;
    background-color: var(--color-dark-bg);
    color: var(--color-white);
}



/*****************************************************************************
                                Form
 *****************************************************************************/

form.GridForm {
    display: grid;
    grid-template-columns: auto auto;
}

form.GridForm label {
    margin-right: 1em;
}

form.GridForm > * {
    margin-bottom: 0.5em;
}


/*****************************************************************************
                               Live Inputs
 directly saving data when modifying a single input field
 <div class="LiveInput"><input ...><button>Save</button></div>

 Transitions are:
    "" -> Modified -> Saving -> Saved / Failed -> ""
 *****************************************************************************/

.LiveInput {

}

.LiveInput input {
    transition: background-color 1s;
    border-radius: 0.4em;
    border: none;
    font-size: 1em;
    background-color: transparent;
}

.LiveInput input:hover,
.LiveInput input:focus {
    outline: 0.2em solid var(--color-modified-fg);
}

.LiveInput input.Modified {
    background-color: var(--color-modified-bg);
}

.LiveInput input.Saving {
    background-color: var(--color-waiting-bg);
    color: var(--color-waiting-fg);
    pointer-events: none;
    font-style: italic;
}

.LiveInput input.Saved {
    background-color: var(--color-success-bg);
}

.LiveInput input.Failed {
    background-color: var(--color-failed-bg);
}

.LiveInput button {
    content: "S";
    visibility: hidden;
    margin-left: 0.5em;
    border-radius: 0.4em;
    background-color: transparent;
    border: none;
    outline: none;
}

.LiveInput button.Modified {
    visibility: visible;
    background-color: var(--color-modified-bg);
    /*outline: 0.2em solid var(--color-modified-fg);*/
}

.LiveInput button.Saving {
    /*visibility: visible;*/
    background-color: var(--color-waiting-bg);
    /*outline: none;*/
    pointer-events: none;
}

.LiveInput button.Saved {
}

.LiveInput button.Failed {
    visibility: visible;
    background-color: var(--color-failed-bg);
    /*outline: 0.2em solid var(--color-failed-fg);*/
}



/******************************************************************************************************************
                                               General Classes
*******************************************************************************************************************/

div.OptionalDateTime {
    display: inline-block;
}

div.OptionalDateTime > div {
    display: inline-block;
}

.NoBr {
    white-space: nowrap;
}

.NoBr > * {
    display: inline-block;
}

.ButtonDelete {
    color: var(--color-text);
    background-color: var(--color-failed-bg);
    /*vertical-align: middle;*/
    border: 0.1em solid var(--color-failed-fg);
    /*display: inline-block;*/
    /*margin: auto;*/
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}

.ButtonDelete:hover {
    background-color: var(--color-failed-fg);
    outline: none;
}

.ButtonDelete:focus {
    outline: none;
}

.ButtonDelete:before {
    content: "\1f5d1";
}


.ButtonAdd {
    color: var(--color-text);
    background-color: var(--color-success-bg);
    border: 0.1em solid var(--color-success-fg);
    font-weight: bold;
}

.ButtonAdd:hover {
    background-color: var(--color-success-fg);
    outline: none;
}

.ButtonAdd:focus {
    outline: none;
}

.ButtonAdd:before {
    content: "+";
}

.ButtonEdit {
    color: var(--color-text);
    background-color: var(--color-modified-bg);
    border: 0.1em solid var(--color-modified-fg);
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}

.ButtonEdit:hover {
    background-color: var(--color-modified-fg);
    outline: none;
}

.ButtonEdit:focus {
    outline: none;
}

.ButtonEdit:before {
    content: "\270e";
}

.ButtonReset {
    color: var(--color-text);
    background-color: var(--color-waiting-bg);
    border: 0.1em solid var(--color-waiting-fg);
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}

.ButtonReset:hover {
    background-color: var(--color-waiting-fg);
    outline: none;
}

.ButtonReset:focus {
    outline: none;
}

.ButtonReset:before {
    content: "\21ba";
}