.clear {
    clear: both;
}

pre {
    font-family: var(--font-family);
    background: #f4f4f4;
    border: 1px solid #ddd;
    padding: 1rem;
    overflow-x: auto;
    counter-reset: line;
    width: 100%;
    box-sizing: border-box;
    white-space:pre-wrap;

    span {
        display: block;

        &:before {
            counter-increment: line;
            content: counter(line);
            display: inline-block;
            border-right: 1px solid #ddd;
            padding: 0 .5em;
            margin-right: .5em;
            color: #888;
            width: 30px;
        }
    }
}

iframe {
    padding: 0;
    margin: 0;
    border:none;
    width: 100%;
}

.clean {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    vertical-align: top;
}

.clean:focus {
    outline: 0;
}

.rp {
    position: relative;
}

.ap {
    position: absolute;
}

.lf {
    float: left;
}

.rf {
    float: right;
}

.op {
    margin: 0 auto;
}

.rT {
    text-align: right;
}

.lT {
    text-align: left;
}

.cT {
    text-align: center;
}

.f-w {
    width: 100%;
    max-width: none;
}

.f-h {
    height: 100%;
    max-height: none;
}

.vT {
    vertical-align: top;
}

.vB {
    vertical-align: bottom;
}

.vM {
    vertical-align: middle;
}

.n-wrap {
    white-space: nowrap;
}

.p,
.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort {
    cursor: pointer;
}

.vC {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}

.vh {
    display: none !important;
}

.x-overflow {
    overflow-x: auto;
}