:root {
    --bg-hell: #e6f2f3;

    /* gem. CI: */
    --vers: #0581C5;

    --e-global-color-primary: #058187;
    --e-global-color-secondary: #2DBAC7;
    --e-global-color-accent: #058187;
}

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    background-color: #2DBAC71A;
    margin: 0;
}

.r {
    text-align: right;
}

.c {
    text-align: center;
}

div#navContainer {
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.17);
    z-index: 10;
}

nav {
    width: min(100vw, 960px);
    margin: 0 auto;
    font-weight: 600;
}

nav ul {
    display: flex;
    padding: 0;
    margin: 0;
    height: 3em;
    align-items: center;
}

nav ul li {
    list-style-type: none;
    margin: 0.5em;
}

nav a {
    color: var(--e-global-color-accent);
    padding: 6  px 20px 6px 20px;
    /* line-height: 20px; */
    text-decoration: none;
}

nav a:hover {
    border-top: solid 3px var(--e-global-color-accent);
    border-bottom: solid 3px var(--e-global-color-accent);
}

main {
    max-width: 960px;
    margin-top: 3.5em;
    margin-left: auto;
    margin-right: auto;
}

a {
    background-color: transparent;
    color: #c36;
    text-decoration: none;
}

table td {
    vertical-align: top;
}

table.list th {
    background-color: var(--e-global-color-primary);
    color: #FFF;
}

table.list th, table.list td {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

table.list th {
    text-align: left;
}

table.list td {
    border-bottom: solid 1px var(--e-global-color-primary);
}

.hint {
    display: flex;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 1em;
    align-items: center;
    margin: 1em;
    max-width: 770px;
}

.hint > span {
    padding: 0.5em;
    width: 3em;
    box-sizing: content-box;
}

.hint > div {
    padding: 0.5em;
    flex: 1;
}

.hint.info {
    border-color: #1e6ba8;
    background-color: #d7edf8;
    color: #1e6ba8;
}

.hint.success {
    border-color: #2d8a4a;
    background-color: #dff2e1;
    color: #2d8a4a;
}

.hint.warning {
    border-color: #d6a700;
    background-color: #fff5cc;
    color: #d6a700;
    border-color: #b97d00;
    background-color: #fff3b0;
    color: #b97d00;
}

.hint.error {
    border-color: #b4352e;
    background-color: #fce4e4;
    color: #b4352e;
}

#statusmsg.error {
    color: rgb(177, 0, 0);
    border: solid 1px rgb(177, 0, 0);
    background-color: rgb(255, 220, 220);
    padding: 3px;
}

.videoContainer {
    border-bottom: solid 1px var(--e-global-color-secondary);
}

#videoContainer { /* in Player */
    text-align: center;
}

#videoPlayer {
    width: calc(min(100vw - 1em, 800px));
    height:calc(min(100vw - 1em, 800px) * 9 /16);
}

ul.chapterlist {
    width: calc(min(100vw - 1em, 800px));
    text-align:left;
    display: inline-block;
    margin-top: 0.5em;
    padding: 0;
    list-style-type: none;
}

ul.chapterlist > li + li {
    margin-top: 1em;
}

h1 {
    color: var(--e-global-color-primary);
}

.trumbowyg-editor-box {
    background: #FFF;
}