.pq-demo-user-notes
{
    /*background: rgb(250,250,255); /*margin:20px 20px 20px 0px;*/
    margin: 0px auto 15px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background:#fff;
}
#accordion {
    overflow: auto;
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 0;
    left: 0;
    padding: 15px;
}
#leftPane ul li
{
    display: block;   
    list-style-type: none;
    /*line-height: 20px;*/
}   
#leftPane ul {
    padding-left: 0;
    margin-left: 15px;
}
#leftPane ul li a {
    color: #222;
    display: inline-block;
    padding: 4px;
}
#leftPane ul li a:hover {
    background-color: #eee;
}
#leftPane ul li a.active {
    background-color: steelblue;
    color: #fff;
}
#rightPane section{
    margin:40px auto;
}
#rightPane .well ul li{
    margin:5px auto;
}
#tabs li .ui-icon-close
{
    float: left;
    margin: 0.4em 0.2em 0 0;
    cursor: pointer;
}

details {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

summary {
    cursor: pointer;
}
details summary::-webkit-details-marker {
    display: none; /* Hides arrow in Chrome/Safari/Edge */
}

summary > * {
    display: inline;
}

summary::before {
    content: "▶ "; /* closed arrow */
    margin-right: 20px;
    display: inline-block;
    transition: transform 0.2s ease;
}

/* RTL: flip the arrow to point *left* instead */
:dir(rtl) summary::before {
    content: "◀ ";
    margin-left: 20px;
    margin-right: 0;
}

details[open] summary::before {
    transform: rotate(90deg); /* points down when open */
}

/* RTL open = arrow also points down, but flipped */
:dir(rtl) details[open] summary::before {
    transform: rotate(-90deg); /* down direction for RTL */
}

li.new-demo > a:first-child:after
{
    content: "New";
    vertical-align: super;
    font-size: 80%;
    color: red;
}
.update-demo > a:first-child:after
{
    content: "Update";
    vertical-align: super;
    font-size: 80%;
    color: red;
}
.container-body
{
    margin: 0;
    border-radius: 0;
}
p{
    margin:10px;
}
.notes::before {
    content: '📌';
    margin-right: 10px;
}
.pointer::before {
    content: '👉';
    margin-right: 10px;
}
#rightPane .well{
    background-color: #fff;
}