/* badges/labels colors */
.status-inactive    { background: #b7c0c7!important; }
.status-canceled    { background: #262b30!important; }
.status-queueing    { background: #d99e16!important; }
.status-active      { background: #51b46d!important; }
.status-critical    { background: #e15258!important; }
.status-new         { background: #2570a8!important; }




/* progressbars */
.progress {
    background: #f5f5f5;
    box-shadow: 0 1px 1px rgba(0,0,0,0.07) inset;
    overflow: hidden;
}
.progress-bar {
    background: #3dcc6d;
    display: block;
    height: 12px;
    line-height: 0;
    vertical-align: top;
    white-space: nowrap;
}

.progress.size-xxs { height: 2px; }
.progress.size-xs { height: 4px; }
.progress.size-s { height: 8px; }

.progress > .progress-bar {
    height: inherit;
    float: left;
}




/* helper classes */
.collapsible--toggle { cursor: pointer; }

.collapsible--container {
    opacity: 0;
    position: absolute;
    visibility: hidden;
}

.collapsible--toggle.show ~ .collapsible--container {
    opacity: 1;
    position: relative;
    visibility: visible;
}



/* special boxes */
.box-example {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
    margin: 10px 0;
    padding: 40px 20px 20px;
    position: relative
}

.box-example:after {
    background: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #666;
    content: "Example";
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    padding: 0 5px;
    position: absolute;
        top: -1px;
        left: -1px;
}

.box-example + .pre { margin: -13px 0 10px; }


.box-code { background: #f8f8f8; }


.box-code.dark {
    background: #212121;
    border-color: #000;
}

.box-code.dark .pre > li { color: #ebebeb; }

.box-code.dark .pre > li::before {
    background: #212121;
    color: #525252;
}

.box-code.dark .pre > li > span { color: #ebebeb; }

.box-code.dark .pre .atn { color: #ffcb6b; }

.box-code.dark .pre .atv { color: #c3e88d; }