.uipanelcontainer {
    top: 3em;
    right: 3em;
    z-index: 10001;
    position: fixed;
    background-color: white;
    overflow: visible;
    background-color: rgba(0, 0, 0, 0);
}

.uipanelcontainer .uipanel {
    opacity: 0.9;
    background-color: #a0a0a0;
    width: 30em;
    transition: width .25s, height .25s;
    border-radius: .3em;
    height: 50em;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    box-shadow: 0 0 .3em rgba(0,0,0,0.3);
}

.uipanelcontainer .collapsed {
    width: 2em;
    height: 2em;
    overflow:hidden;
}

.uipanelcontainer .uipanel .head {
    padding: 0.1em;
    height: 1.8em;
    background-color:white;
    display: block;
    border-bottom: 1px solid black;
}

.uipanelcontainer .uipanel .content {
    position:relative;
    padding: .3em;
    height:46.4em;
    margin:0;
    overflow-y:auto;
    overflow-x:hidden;
}

.uipanelcontainer .uipanel .content table{
    width:100%;
}

.uipanelcontainer .uipanel .content table td {
    width: 50%;
}

.uipanelcontainer .uipanel .content table thead {
    font-weight:bold;
}

.uipanelcontainer .uipanel .content .item {
    float:left;
    width:100%;
    box-sizing:border-box;
    background-color: rgba(255, 255, 255, 0.6);
    margin-bottom:.3em;
    border-radius: .3em;
    padding:0.3em;
}

.uipanelcontainer .uipanel .content .item .tool {
    float:left;
    margin: .1em;
    width:2em;
    height:2em;
    overflow:hidden;
    border-radius:.3em;
    background-color:white;
    padding:.5em;
    border: .2em solid #d0d0d0;
    text-align: center;
}

.uipanelcontainer .uipanel .content .item .tool.pressed {
    background-color: lightgoldenrodyellow;
    border: .2em solid black;
    box-shadow: inset 0 0 0.5em 0.5em rgba(255,255,0,.6);
}

.uipanelcontainer .uipanel .content .item .tool:hover {
    border: .2em solid white;
    background-color:lightgreen;
}

.uipanelcontainer .uipanel .content .item .tool.pressed:hover {
    border: .2em solid black;
    background-color:lightgreen;
}

.item td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}

.tool img {
    object-fit: contain;
    width: 2em;
    height: 2em;
    display: block;
    cursor: pointer;
    filter: invert(1);
}

.uipanelcontainer .uipanel .caption {
    display:flex;
    overflow:hidden;
    height:1.6em;
}

.uipanelcontainer .uipanel .toggle {
    display:block;
    float: right;
    margin: .1em;
    width: 1.6em;
    height: 1.6em;
    cursor: pointer;
}


.uipanelcontainer .uipanel .head hr {
    position:relative;
    width:100%;
    border:none;
    margin: .8em;
    border-top: .1em solid black;
}