.opaque-on-hover {
    opacity: 0.1;
    transition: .256s;
}

.hidden-on-hover {
    opacity:1;visibility : visible;
    transition: .256s;
}

.hidden-on-hover:hover {
    opacity:0; visibility : hidden;
}

.opaque-on-hover:hover {
    opacity:1;
}

.jsp-warn { color:orange; }
.jsp-error { color:red; }
.jsp-info { color:cyan; }

 .flip-on-hover+div.jspanel-holder {
    visibility:hidden;
    display:none;
    transition: all 1s;
}

.flip-on-hover.on+div.jspanel-holder {
    visibility:visible;
    display:block;

}

body > :not(.jspanel-holder) {z-index:0;}

.jspanel-holder {
    position: fixed;
    box-shadow: 0 0 20px black;
    width : 100%;
}

.jspanel {
    max-width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 40px 10px 20px;
    position: relative;
    overflow: auto;
    font-family: monospace;
    z-index: 100;
}

.jspanel-switch {
    z-index:102 !important;
    position:fixed;
    top:15px;
    right:15px;
    background-color:rgba(255,0,0,.5);
    width:16px; height:16px;
    border-radius:50%;
    transition: all .5s;
    cursor: pointer;
}

.jspanel-switch.on {
    background-color:rgba(0,255,0,.5);
}
.jspanel-switch-2 {
    float:right;
    background-color:rgba(0,255,0,.5);
    width:16px; height:16px;
    margin: 1px 0;
    border-radius:50%;
    transition: all .5s;
    cursor: pointer;
}

.jspanel-title {
    position : absolute;
    top :0;
    left:0;
    width : 100%;
    height : 2em;
    padding : 5px 10px;
    background : white;
    color : black;
    z-index : 101;

}

.ts { float:left;}
.ts+div { margin-left:200px; }

.jspanel-menu {
    float:right;
    margin-right:10px;
}

.jspanel-menu a:link, .jspanel-menu a:visited { text-decoration: none;}

.jspanel-settings {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 103;
}
.jspanel-settings.jspanel-overlay {
    background: rgba(255,255,255,.7);
}