
html {
    font-size: var(--font-size-root);
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color: var(--color-body-bg);
    color: var(--color-text);
}

body {
    font-size: 0.65rem;
    font-weight: 400;

    &.scroll-lock {
        overflow: hidden;
    }
}

.iconfont {
    font-size: inherit;
}

pre, code {
    padding: 0.25rem;
    font-size: 0.6rem;
    -webkit-border-radius: var(--size-radius, 0.25rem);
    -moz-border-radius: var(--size-radius, 0.25rem);
    border-radius: var(--size-radius, 0.25rem);
}

pre {
    border: 1px solid var(--color-body-line);
}

a.ub-text {
    color: #333;

    &:hover {
        text-decoration: underline;
    }
}

.margin-top-lg {
    margin-top: var(--size-margin-lg, 2rem) !important;
}

.margin-top {
    margin-top: var(--size-margin, 0.5rem) !important;
}

.margin-top-remove {
    margin-top: 0 !important;
}

.margin-left {
    margin-left: var(--size-margin, 0.5rem) !important;
}

.margin-left-remove {
    margin-left: 0 !important;
}

.margin-bottom {
    margin-bottom: var(--size-margin, 0.5rem) !important;
}

.margin-bottom-lg {
    margin-bottom: var(--size-margin-lg, 2rem) !important;
}

.margin-bottom-remove {
    margin-bottom: 0 !important;
}

.margin-right {
    margin-right: var(--size-margin, 0.5rem) !important;
}

.margin-right-remove {
    margin-right: 0 !important;
}

.ub-padding {
    padding: var(--size-margin, 0.5rem) !important;
}

.padding-top {
    padding-top: var(--size-margin, 0.5rem) !important;
}

.padding-bottom {
    padding-bottom: var(--size-margin, 0.5rem) !important;
}

.padding-bottom-remove {
    padding-bottom: 0 !important;
}

.ub-container, .ub-mobile-container {
    max-width: var(--container-width, 57rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--size-margin) / 2);
    padding-right: calc(var(--size-margin) / 2);

    &.narrow {
        max-width: 30rem;
    }

    &.narrow-lg {
        max-width: 40rem;
    }
}


.ub-mobile-container {
    max-width: 30rem;
    box-shadow: 0 0 5px #CCC;
}

@colors: {
    a: #FF7F50;
    b: #DC143C;
    c: #9932CC;
    d: #B22222;
    e: #DAA520;
    f: #FF69B4;
    g: #20B2AA;
    h: #9370DB;
    i: #3CB371;
    j: #7B68EE;
    k: #C71585;
    l: #191970;
    m: #FF8C00;
    n: #DB7093;
    o: #CD853F;
    p: #BC8F8F;
    q: #EE82EE;
    r: #8B4513;
    s: #FA8072;
    t: #2E8B57;
    u: #6B8E23;
    v: #FF6347;
    w: #ED3F14;
    x: #4F7FF3;
    y: #6A46BD;
    z: #E9BD6C;
};

each(@colors, {
    .ub-color-@{key} {
        color: @value !important;
    }
    .ub-bg-@{key} {
        background-color: @value !important;
        color: #FFF !important;
    }
});

:root, page {
    each(@colors, {
        --color-@{key}: @value;
    });
}

.ub-bg-primary {
    background-color: var(--color-primary) !important;
}

.ub-bg-white {
    background-color: #FFF !important;
}

.ub-bg-vip {
    background-color: #e9bd6c !important;
    color: #FFF !important;
}

.ub-cursor-pointer {
    cursor: pointer !important;
}

.ub-text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ub-text-bold {
    font-weight: bold;
}

.ub-text-white {
    color: #FFF !important;
}

.ub-text-muted {
    color: var(--color-muted) !important;
}

.ub-text-primary {
    color: var(--color-primary) !important;
}

.ub-border-primary {
    border-color: var(--color-primary) !important;
}

.ub-text-default {
    color: var(--color-text) !important;
}

.ub-text-success {
    color: var(--color-success) !important;
}

.ub-text-warning {
    color: var(--color-warning) !important;
}

.ub-text-danger {
    color: var(--color-danger) !important;
}

.ub-text-tertiary {
    color: var(--color-tertiary) !important;
}

.ub-text-lg {
    font-size: 1rem !important;
}

.ub-text-sm {
    font-size: 0.6rem !important;
}

.ub-text-xs {
    font-size: 0.5rem !important;
}

.ub-text-center {
    text-align: center !important;
}

.ub-text-right {
    text-align: right !important;
}

.ub-text-left {
    text-align: left !important;
}

.ub-text-no-wrap {
    white-space: nowrap;
}

.ub-block {
    display: block;
}

.ub-display-none {
    display: none;
}

.ub-inline-block {
    display: inline-block;
}

.ub-box-shadow {
    box-shadow: 0 0.2rem 0.9rem #2f536d1f;
}

.ub-content-bg {
    background-color: var(--color-content-bg);
}

.ub-content-box {
    background-color: var(--color-content-bg);
    border-radius: var(--size-radius);
    padding: var(--size-padding);
}

.ub-content-block {
    background-color: var(--color-body-block-bg);
    color: var(--color-body-block);

    &:hover {
        background-color: var(--color-body-block-bg-hover);
        color: var(--color-body-block);
    }
}

.ub-border {
    border: 1px solid var(--color-body-line);
}

.ub-border-bottom {
    border-bottom: 1px solid var(--color-body-line);
}

.ub-border-top {
    border-top: 1px solid var(--color-body-line);
}

.ub-h-full {
    min-height: 100vh;
}

.ub-header-mobile + .ub-h-full,
c-page-header + .ub-h-full,
c-page-header-search + .ub-h-full {
    min-height: calc(100vh - 50px);
}

@media (max-width: 40rem) {
    .ub-display-none-sm {
        display: none !important;
    }

    .ub-display-block-sm {
        display: block !important;
    }

    .ub-text-center-sm {
        text-align: center !important;
    }
}


.body-scroll-lock {
    overflow: hidden;

    body {
        overflow: hidden;
    }

    .body-scroll-lock-hide {
        visibility: hidden;
    }

    .body-scroll-lock-none {
        display: none;
    }
}

