.statusBar {
    position: fixed;
    visibility: hidden;
    right: 0px;
    top: 5px;
    /* to bet set later */
    z-index: 20013;
    font-size: 1.3rem;
    /* animation: blink-1 1s 1 both; // infinite both; */
    /* direction: rtl; */
    /* margin-left: 5px; */
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    align-content: flex-end;

    &>* {
        display: inline-block;
        align-content: center;

        justify-content: center;
        align-self: stretch;
    }

    & .statusBarMesgWrapper {
        & .statusBarMesg {
            opacity: 1;
            transition-duration: 5s;
            transition-property: opacity;

            background-color: #ececd7;
            /* background-color: green; */
            /* filter: opacity(1); */
            /* width: 220px; */
            width: 100%;
            /*  transition: all 200ms ease; */
            /*  transition-property: box-shadow, height, width, background, font-size; */
            /* transition: width 3s ease-in, opacity 3s; */
            /* transition-delay: 3s; */
            overflow: hidden;
            white-space: nowrap;
            text-align: right;
            /* position: relative; */
            height: 100%;

            padding: 0px 5px;
            padding-top: 4px;

            &::before {
                content: ' -- ';
            }

            &::after {
                content: ' -- ';
            }

            &:hover {
                /* outline: 1px solid green; */
            }

            outline: 1px dashed lightgreen;
        }
    }

    & .statusBarButtonWrapper {
        text-align: center;

        zbackground-color: red;
        /* padding-left: 10px; */
        /* height: 100%; */

        /* padding-right: 5px; */
        /* & .statusBarBtn { */
        & button {
            /* zheight: 100%; */
            /* border: 2px solid gray; */
            border-radius: 2px;
            font-size: 1.3rem;
            color: #777;
            /* color: red; */
            cursor: pointer;

            /*  &:hover+div { */
            /*      display: inline-block; */
            /*      opacity: 1; */
            /*      background-color: green; */
            /*  } */

            &:hover {
                color: black;
                /* font-size: larger; */
                outline: 1px dotted blue;
                /* border-left: 3px solid lightblue; */
                /* border-right: 3px solid lightblue; */
            }

        }
    }

    /*  & .zzstatusBarButtonWrapper:hover+div { */
    /*      display: inline-block; */
    /*      opacity: 1; */
    /*      background-color: green; */
    /*  } */
}

/* =============================================================sidebar Dev Links */
.sideBarDevLinks {
    background-color: lightskyblue;
    list-style: none;
    font-size: 1rem;
    position: fixed;
    z-index: 1101;
    min-width: fit-content;
    overflow-y: scroll;

    /* padding-left: 5px; */
    padding-right: 8px;
    /* margin-right: 5px; */
    bottom: 40px;
    right: 7px;
    max-height: 90vh;

    li {
        margin-bottom: .3rem;
    }

    ul {
        /* list-style: none; */
        /* margin-left: 0px; */
        padding-left: 1.5em;
    }
}

details.sideBarDevLinks>summary {
    padding: 2px 6px;
    /* width: 15em; */
    background-color: #ddd;
    border: none;
    box-shadow: 3px 3px 4px black;
    cursor: pointer;
}


@media screen and (max-width:1000px) {
    .sideBarDevLinks {
        display: none;
    }
}