
.molstar-log-wrap {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
}

.molstar-log {
    position: absolute;
    right: -20px;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 90%;
    background: $control-background;
}

.molstar-log {
    ul {
        padding: 0;
        margin: 0;
    }

    color: $log-font-color;

    li {
        clear: both;
        margin: 0;
        background: $default-background;
        position: relative;

        &:not(:last-child) {
            border-bottom: 1px solid $border-color;
        }
    }


    .molstar-log-entry {
        margin-left: $control-label-width;
        background: color-lower-contrast($control-background, 5%);
        padding: $info-vertical-padding ($control-spacing + 15px) $info-vertical-padding $control-spacing ;
    }

    .molstar-log-timestamp {
        padding: ($info-vertical-padding + 1) $control-spacing ($info-vertical-padding - 1) $control-spacing;
        float: left;
        text-align: right;
        width: $control-label-width;
        color: $log-timestamp-font-color;
        //vertical-align: baseline;
        //line-height: $row-height;
        font-size: 90%;
    }

    .molstar-log-timestamp small {
        font-size: 90%;
    }
}

// .molstar-log hr {
//     border-color: $separator-color;
//     margin: 3px 3px 0 5px;
// }

.molstar-log .label {
    margin-top: -3px;
    font-size: 7pt;
}

.molstar-log-entry-badge {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
}

.molstar-log-entry-message {
    background: $log-message;
}

.molstar-log-entry-info {
    background: $log-info;
}

.molstar-log-entry-error {
    background: $log-error;
}

.molstar-log-entry-warning {
    background: $log-warning;
}
