.error {
    color: red;
    font-weight: bold;
}

body {
    font-family: sans-serif;
}

body > div {
    background-color: gold;
    border-color: black;
    border-style: solid;
    padding: .4em;
    margin: 5px;
    border-width: 1px;
}

.sub_element {
    background-color: white;
    border-color: black;
    border-style: solid;
    padding: .4em;
    border-width: 1px;
}

#status {
    display: flex;
    justify-content: space-between;
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    text-align: left;
    padding: 0.3em;
}

td {
    font-size: 90%;
}

.borderless td {
    border: none;
}

#eventEditorCodeEditor {
    width:800px;
    height:200px;
    border:1px solid #ccc;
    background:#f5f5f5;
}

#eventEditorDiff {
    width:800px;
    border:1px solid #ccc;
    background:#f5f5f5;
}

#add_new_user_form {
    display: inline-block;
}

/**
 * the following CSS code is more technical in nature.
 */

.hidden {
    /* general-purpose class used to hide elements from JS. */
    display: none !important;
}

.tabs {
    --tabLabelHeight: 2em;
    --tabLabelWidth: 9em;
    --tabBorderWidth: 1px;

    /* the tab labels are anchored here. */
    position: relative;
    /* shift the tab content down by the height of the labels, minus one border width. */
    padding-top: calc(var(--tabLabelHeight) - var(--tabBorderWidth));
}

.tabs > input {
    display: none;
    position: fixed;
}

.tabs > label {
    background-color: #ccc;

    /* add the border width to the width to prevent "double" borders between adjacent labels */
    width: calc(var(--tabLabelWidth) + var(--tabBorderWidth));
    height: var(--tabLabelHeight);
    line-height: var(--tabLabelHeight);
    overflow: hidden;
    font-weight: bold;
    text-align: center;

    /* this is the tab separator */
    border: var(--tabBorderWidth) solid black;
    box-sizing: border-box;

    /* position tab labels relative to the container. */
    position: absolute;
    top: 0;
}

.tabR0 { right: calc(var(--tabLabelWidth) * 0); }
.tabR1 { right: calc(var(--tabLabelWidth) * 1); }
.tabR2 { right: calc(var(--tabLabelWidth) * 2); }
.tabR3 { right: calc(var(--tabLabelWidth) * 3); }
.tabR4 { right: calc(var(--tabLabelWidth) * 4); }
.tabR5 { right: calc(var(--tabLabelWidth) * 5); }

.tabL0 { left: calc(var(--tabLabelWidth) * 0); }
.tabL1 { left: calc(var(--tabLabelWidth) * 1); }
.tabL2 { left: calc(var(--tabLabelWidth) * 2); }
.tabL3 { left: calc(var(--tabLabelWidth) * 3); }
.tabL4 { left: calc(var(--tabLabelWidth) * 4); }
.tabL5 { left: calc(var(--tabLabelWidth) * 5); }

.tabs > label:hover {
    cursor: pointer;
    background-color: #ddd;
}

.tabs > input:checked + label {
    /* show the label of the selected tab in a different color. */
    background-color: white;
    border-bottom-style: none;
}

.tabs > div {
    /* the tab contents. by default, don't display them. */
    background-color: white;
    padding: 1em;
    border: var(--tabBorderWidth) solid black;
}

.tabs > input:not(:checked) + label + div {
    /* hide tabs which are not selected. */
    display: none;
    position: fixed;
}

.tooltip_container {
    display: inline-block;
    position:relative;
}

.tooltip {
    position: absolute;
    background: gold;
    text-align: left;
    padding: 0.5em;
    top: 2em;
    border: 1px solid black;
    display:none;
}

.tooltip_container:hover .tooltip {
    display:block;
}