:root {
    --graublau: rgb(60,75,96);
    --narzissengelb: rgb(227,156,0);
    --kieferngruen: rgb(88,111,98);
    --blassgelb: rgb(255,231,172);
    --lichtblau: rgb(65,192,240);
}
ul.nav li a.navbar-active {
    color: var(--graublau); background: var(--narzissengelb); font-weight: bold;
}
ul.nav li a.navbar-active:hover {
    color: var(--graublau); background: var(--narzissengelb); font-weight: bold;
}
ul.nav li a, ul.nav li a:visited {
    color: #888888;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #888888;
}

ul.nav li.active a {
    color: #888888;
}

a.email, a.email:hover {
    text-decoration: none;
    color: #888888;
}

/* line style */
.line {float:left;width:100%;margin-bottom:10px;}
.left-line {float:left;width:20%;height:2px;background:#7ab80e;}
.right-line {float:left;width:80%;height:1px;background:#e1e1e1;margin-top:1px;}


body {
    background-color: #fdfdfd;
    font-family: Lexend, 'Source Sans Pro',"Helvetica Neue", Helvetica, Arial, sans-serif;
    color: darkslategray;
    font-size: 14px;
    line-height: 20px;
    min-height: 100%;
}

.wrap {
    background-color: #ffffff;
}

footer {
    border-top: var(--narzissengelb) solid 5px;
}

main {
    margin-top: 20px;
    min-height: 600px;
}

.login {

}

@media screen and (max-width: 600px) {
    .row {
    color: darkslategray;
}
    header .row, footer .row {
    font-size: 12px;
    color: #888888;
    padding-top: 10px;
    padding-right: 9px;
    padding-left: 9px;
}
}

@media screen and (min-width: 601px) {
    .wrap {
        -webkit-box-shadow: 0px 5px 10px #1c1c1c;
        -moz-box-shadow: 0px 5px 10px #1c1c1c;
        box-shadow: 0px 5px 10px #1c1c1c;
        margin-top: 50px;
    }
    .row {
    color: darkslategray;
    padding-right: 20px;
}
    header .row, footer .row {
    font-size: 12px;
    color: #888888;
    padding-top: 10px;
    padding-right: 90px;
    padding-left: 20px;
}
}

#accordion.table td:nth-child(odd) {
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 5px;
}

#accordion.table dd {
    width:100%;
    word-wrap:break-word;
}

#accordion.table button {
    width:240px;
    margin: 5px;
}

#switch {
    margin: 20px 20px 20px 0;
}


div.accordian-body.collapse.in {
    margin: 20px;
}

#toggle-bottom {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}

 #tooltip
{
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
}

#tooltip:after /* triangle decoration */
{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #111;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

    #tooltip.top:after
    {
        border-top-color: transparent;
        border-bottom: 10px solid #111;
        top: -20px;
        bottom: auto;
    }

    #tooltip.left:after
    {
        left: 10px;
        margin: 0;
    }

    #tooltip.right:after
    {
        right: 10px;
        left: auto;
        margin: 0;
    }
        .vcenter {
    padding-top: 15%;
}
#liveview-menu {
    font-size: x-large;
    color: lightgray;
    text-decoration: none;
}
#liveview-menu:hover {
    color: var(--graublau);
}
#liveview-menu-close {
    display: none;
}
#liveview-menu-icon {
    display: inline;
}
.menu {
    position: absolute;
    background: #fefefe;
    border: 1px solid lightgray;
    list-style: none;
    text-decoration: none;
    padding: 1rem;
    z-index: 100;
    display: none;
    width: 400%;
}
.menuItem:hover {
    text-decoration: none;
    color: var(--graublau);
}
.menuItem {
    font-size: larger;
    color: #222222;
}