#propbar {
    float: right;
    width: 320px;
    background-color: #fff;
    border-left: 1px solid #e1e1e1;
    position: fixed;
    right: 0;
    top: 88px;
    bottom: 0;
    margin-top: 0px;
    z-index:1019;
}

@media (max-width: 768px) {
    #propbar {
        width: 25px;
        border-left: 8px solid #ccc;
    }
}

.modal #propbar {
    position: relative;
    top: 0;
    border-right: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    height: 310px;
}

#propbar .proplist .row {
    margin: 0;
    padding: 10px;
}

#propbar .proplist .row ul.actions {
    margin: 0 -10px 0 0;
    padding: 0 0 0 5px;
    white-space: nowrap;
    width: auto;
    float: right;
    clear:right;
}

#propbar .proplist .row ul.actions li {
    display: inline;
    border-right: 1px solid #d0dde9;
    padding: 0px 4px 0px 1px;
    color: #999;
}

#propbar .proplist ul.actions li:last-child {
    border: 0 none;
}

#propbar .proplist ul.actions a {
    text-transform: uppercase;
    color: #7e91aa;
    font-weight: 600;
    display: inline-block;
    margin: 0 0 0 0;
    text-decoration: none;
}
#propbar .proplist ul.actions i {
    cursor: pointer;
    font-size: 11px;
    opacity: 0.6;
    transition: opacity .1s linear;
    -moz-transition: opacity .1s linear;
    -webkit-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
}
#propbar .proplist ul.actions i:hover {
    opacity: 1;
}

#propbar .proplist .row.header {
    background: #fafafa;
    margin: 0;
    padding: 4px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    text-transform: uppercase;
    font-size: 0.9em;
    color:#777;
}

#propbar .proplist .row p {
    color:#999;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 20px;
}

#propbar .proplist .row.help {
    color:#999;
}
#propbar .proplist .row.help p {
    margin-bottom: 10px;
}

#propbar .proplist .row.subheader {
    font-weight: bold;
    color: #777;
    padding: 0 8px;
}

#propbar .proplist .row.header ul.tabs {

}

#propbar .proplist .row.header ul.tabs li {
    float: left;
    margin-right: 5px;
    padding-right: 5px;
    border-right: 1px solid #CCC;
}

#propbar .proplist .row.header ul.tabs li:last-child {
    border-right: 0px solid #CCC;
}

#propbar .proplist .row.header ul.tabs li a {
    color:#777;
}

#propbar .proplist .row.header ul.tabs li a.active {
    font-weight: bold;
}

#propbar .proplist ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#propbar .proplist h1,
#propbar .proplist h2,
#propbar .proplist h3,
#propbar .proplist h4,
#propbar .proplist h5,
#propbar .proplist h6 {
    margin: 0;
    padding: 0;
}

#propbar .proplist ul.tool-list {
    margin-top: 5px;
}
#propbar .proplist ul.tool-list:first-child {
    margin-top: 0px;
}

#propbar .proplist ul.name-value {
    list-style: none;
    display: table;
    padding: 0;
    width: 305px;
    margin-bottom: 0px;
}
#propbar .proplist ul.name-value.narrow {
    width: auto;
}
#propbar .proplist ul.name-value li {
    display: table-row;
    margin-bottom:4px;
}
#propbar .proplist ul.name-value li.spacer:after {
    content: " ";
}
#propbar .proplist ul.name-value li.spacer {
    height: 12px;
}
#propbar .proplist ul.name-value li > label {
    display: table-cell;
    width: 70px; 
    padding:0px 4px 4px 0;
}
#propbar .proplist ul.name-value.wide li > label {
    width: 130px; 
}
#propbar .proplist ul.name-value li > span {
    display: block;
    width: 230px; 
    padding:0;
    margin:0;
    overflow:hidden;
    margin-bottom: 4px;
}

#propbar .proplist ul.name-value.wide li > span {
    width: 170px;
}

#propbar .proplist ul.name-value li > span em {
    font-style: italic;
    color: #ccc;
    margin-left: 5px;
}

#propbar .proplist ul.name-value li > span a.editable-hide ~ em {
    display: none;
}

/* inline editable properties */
.proplist .editable-controls {
    width: 248px;
    margin-top: -16px;
    position: absolute;
    left: 75px;
}

.proplist ul.name-value.wide li > span .editable-controls {
    width: 191px;
    margin-top: -16px;
    position: absolute;
    left: 137px;
}

.proplist .editable-wrap .editable-controls > input, .proplist .editable-wrap .editable-controls > select {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
}

.proplist .editable-wrap .editable-controls > input[type="text"] {
    padding: 2px;
    margin: 0;
    height: 22px;
    width: 205px;
}

.proplist ul.name-value.wide li > span .editable-wrap .editable-controls > input[type="text"] {
    width: 147px;
}

.proplist .editable-wrap .editable-controls > input[type="checkbox"] {
    padding: 2px;
    margin: 0;
    height: 22px;
    width: 32px;
}

.proplist ul.name-value.wide li > span .editable-wrap .editable-controls > input[type="checkbox"] {
    width: 32px;
}

.proplist .editable-wrap .editable-controls > select {
    padding: 1px;
    margin: 0;
    height: 22px;
    width: 205px;
}

.proplist ul.name-value.wide li > span .editable-wrap .editable-controls > select {
    width: 147px;
}

.proplist .editable-buttons {
    display: inline-block!important;
    width: 40px!important;
    position: absolute;
    right: 3px;
}

.proplist .editable-buttons button {
    padding: 2px!important;
    margin: 0 0 0 1px!important;
    height: 22px!important;
}

.proplist .editable-buttons span.icon {
    width: 12px!important;
    height: 22px!important;
}

.proplist .editable-buttons span.icon.icon-ok:before {
    content: "\f00c";
}

.proplist .editable-buttons span.icon.icon-ok {
    margin-left: -1px!important;
    margin-right: -1px!important;
    margin-top: 2px!important;
}

.proplist .editable-buttons span.icon.icon-remove {
    margin-left: -2px!important;
    margin-top: 2px!important;
    padding: 0 1px 0 2px;
}

.proplist .editable-buttons span.icon.icon-remove:before {
    content: "\f00d";
}

.proplist .editable-error {
    position: absolute;
    left: 2px;
    margin-top: 23px;
    background: #fff;
}