.hbfooter {
    width: 100%;
    background-color: #454441;
    color: #e9e5d8;
    text-align: center;
    padding: 10px;
}

.alink {
    color: orange;
    text-align: center;
    text-decoration: none;
}

    .alink:hover {
        background-color: #dedbd5;
        color: blue;
    }


#legend {
    display: block;
}

    #legend span {
        padding: 2px 4px;
        /*color: white;*/
        /*text-shadow: 1px 1px 1px black;*/
        font-weight: bold;
        background-color: lightgray;
    }

    #legend .string {
        background-color: mediumseagreen;
    }

    #legend .array {
        background-color: mediumpurple;
    }

    #legend .object {
        background-color: #ffc885;
    }

    #legend .number {
        background-color: bisque;
    }

    #legend .boolean {
        background-color: lightblue;
    }

    #legend .null {
        background-color: WhiteSmoke;
    }

body {
    background-color: #dedbd5;
}

.topnav {
    border-radius: 0px;
    background-color: #454441;
    overflow: hidden;
}

    .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 1px 10px;
        text-decoration: none;
    }

        .topnav a:hover {
            background-color: #a7d9a7;
            color: black;
        }

        .topnav a.active {
            background-color: #a7d9a7;
            color: black;
        }

            .topnav a.active:hover {
                background-color: #ff9514;
            }


.collapsible {
    border-radius: 0px;
    background-color: #a7d9a7;
    color: black;
    cursor: pointer;
    padding: 1px 5px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .collapsible:hover {
        background-color: #dedbd5;
        color: black;
    }

/* Style the collapsible content. Note: hidden by default */
.content {
    border-radius: 0px;
    padding: 0 0px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}


.mybtn {
    border-radius: 10px;
    background-color: #a7d9a7;
    border: none;
}

    .mybtn:hover {
        background-color: #ff9514;
    }

.blue {
    background-color: lightskyblue;
}

.red {
    background-color: indianred;
}

.green {
    background-color: #a7d9a7;
}


.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #454441;
    color: white;
    text-align: center;
    border-radius: 0px;
}

.nav-pills .nav-link {
    color: white;
    background-color: #454441;
    border-radius: 0px;
    padding: 1px 10px;
}

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        background-color: #dedbd5;
        color: black;
    }

.accordion-button {
    padding: 0px 5px;
}

.collapsed {
    border-radius: 0px;
}

/*.accordion-button:not(.collapsed) {
    background-color: #e8dcba;
}*/

.accordion {
    margin: 2px 0px 2px 0px;
}

.accordion-body {
    background-color: #f2efeb;
    padding: 3px;
}

.bot {
    width: 100%;
    background-color: #ebe7e1;
}

.bot-item {
    padding: 1px;
    cursor: default;
}

    .bot-item:hover {
        background-color: #c2b89d;
    }


/* Tooltip container */
.info {
    position: relative;
    display: inline-block;
}

    /* Tooltip text */
    .info .itext {
        visibility: hidden;
       /* width: 300px;*/
        background-color: #454441;
        color: white;
        text-align: center;
        padding: 1px 1px;
        border-radius: 0px;
        /* Position the tooltip text */
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 0%;
        /*margin-left: -150px;*/
        /* Fade in tooltip */
        opacity: 0;
        transition: opacity 0.3s;
    }

        /* Tooltip arrow */
/*        .info .itext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }*/

    /* Show the tooltip text when you mouse over the tooltip container */
    .info:hover .itext {
        visibility: visible;
        opacity: 1;
    }


.infohint {
    background-color: #ddffdd;
    border-left: 6px solid #04AA6D;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
    color: black;
    cursor: pointer;
    padding-left: 10px;
    width: 100%;
    text-align: left;
    outline: none;
    transition: 0.4s;
    margin-bottom: 0px;
    margin-top: 5px;
    font-weight: bold;
}
    .infohint.active, .infohint:hover {
        background-color: #a7d9a7;
    }
.panelinfohint {
    background-color: #ddffdd;
    padding: 5px;
    display: none;
    overflow: hidden;
}

.tv-legend {
    width: 90%;
    height: 50%;
    position: absolute;
    padding: 8px;
    font-size: 14px;
    text-align: left;
    z-index: 1000;
    pointer-events: none;
}
.go-to-realtime-button {
    width: 27px;
    height: 27px;
    position: absolute;
    display: none;
    padding: 7px;
    box-sizing: border-box;
    font-size: 10px;
    border-radius: 50%;
    text-align: center;
    z-index: 1000;
    color: #B2B5BE;
    background: rgba(250, 250, 250, 0.95);
    box-shadow: 0 2px 5px 0 rgba(117, 134, 150, 0.45);
}