@font-face {
    font-family: "spire_nbpregular";
    src: url(/public/fonts/spirenbp-eoab-webfont.woff2) format("woff2"), url(/public/fonts/spirenbp-eoab-webfont.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

@media (max-width: 640px), (max-width: 834px) and (orientation: portrait) {
    .layout-root {
        min-width: auto;
        background: var(--body-background-main);
        padding-top: var(--header-height);
    }
}

#wrap div {
    scroll-margin-top: calc(var(--header-height) + var(--space-medium));
}

#wrap {
    min-height: 100%;
    margin: 15px auto 0;
}
#wrap > .container {
    width: 75%;
    min-width: 940px;
}
.xgm-embedded #wrap {
    margin: 0;
}

#content form .spoiler-content {
    padding: 0;
    border-left: none;
}

.span {
    display: block;
    float: left;
    min-height: 30px;
    margin-left: 0 !important;
    padding: 0;
}

.new {
    color: var(--text-new-color);
}

.float-center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.thumbnail .float-center, .caption {
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.read-more-container .txt2::after {
    content: none;
}
.read-more-container .read-more-container-button {
    white-space: nowrap;
    float: right;
}

.reportbutton {
    display: none;
}

.level-icon-font {
    font-family: "spire_nbpregular", Impact, Charcoal, sans-serif;
    font-size: 15px;
    letter-spacing: 0;
    padding-top: 5px;
    padding-left: 2px;
    text-align: center;
}

.level-icon {
    font-family: "spire_nbpregular", Impact, Charcoal, sans-serif;
    font-size: 15px;
    width: 24px;
    height: 24px;
    padding-top: 5px;
    padding-left: 2px;
    text-align: center;
    letter-spacing: 0;
    color: var(--level-icon-font-color);
    border: var(--level-icon-border-color) 1px solid;
    background: var(--level-icon-border-color); /* legacy */
    border-radius: 2px;
    text-shadow: 0 0 1px var(--text-color-light-max), 0 0 1px var(--text-color-light-max), 0 0 1px var(--text-color-light-max), 0 0 1px var(--text-color-light-max);
}

/** LEVEL COLORS */
.level-card, .level-card-bordered {
    /* input: --level-card-level */
    /* const: --level-card-level-max, --level-card-lightness1, --level-card-lightness2 */
    --x: calc(var(--level-card-level) / var(--level-card-level-max));
    --level-card-hue1: calc(50 + 320*var(--x));
    --level-card-hue2: calc(75 + 320*var(--x));
    --level-card-saturation1: calc(50% + var(--x)*20%);
    --level-card-saturation2: calc(70% + var(--x)*20%);
}

.level-card {
    color: var(--level-icon-font-color) !important;
    background: hsl(var(--level-card-hue1), var(--level-card-saturation1), var(--level-card-lightness1)) !important;
    box-shadow: inset 0 0 12px 0 hsl(var(--level-card-hue2), var(--level-card-saturation2), var(--level-card-lightness2)) !important;
}

.level-card-bordered {
    border-color: hsl(var(--level-card-hue1), var(--level-card-saturation1), var(--level-card-lightness1)) !important;
}

.level-card:hover {
    background: hsl(var(--level-card-hue1), var(--level-card-saturation1), var(--level-card-lightness2)) !important;
}

.level-card:hover > a {
    background: none !important;
}

.level-card a {
    color: var(--level-icon-font-color) !important;
}

/** CAST COLORS */
.level-card-user-cast1 {
    background: var(--level-icon-cast-1-background) !important;
    box-shadow: inset 0 0 12px 0 var(--level-icon-cast-1-box-shadow-color) !important;
}

.level-card-user-cast2 {
    background: var(--level-icon-cast-2-background) !important;
    box-shadow: inset 0 0 12px 0 var(--level-icon-cast-2-box-shadow-color) !important;
}

.level-card-user-cast3 {
    background: var(--level-icon-cast-3-background) !important;
    box-shadow: inset 0 0 12px 0 var(--level-icon-cast-3-box-shadow-color) !important;
}

.level-card-user-cast4 {
    background: var(--level-icon-cast-4-background) !important;
    box-shadow: inset 0 0 12px 0 var(--level-icon-cast-4-box-shadow-color) !important;
}

.level-card-user-cast5 {
    background: var(--level-icon-cast-5-background) !important;
    box-shadow: inset 0 0 12px 0 var(--level-icon-cast-5-box-shadow-color) !important;
}

.wsad-block {
    overflow-y: auto;
    margin-bottom: var(--space-decent);
}
.chat-layout-container + .wsad-block {
    margin-top: var(--space-standard);
}
.wsad-block, .wsad-block > div {
    max-height: 140px;
}

@media (max-width: 640px), (max-width: 834px) and (orientation: portrait) {
    .layout-root #wrap {
        margin-top: var(--space-standard);
    }
    .layout-root #wrap > .container, .container {
        width: 100%;
        min-width: auto;
    }
    .layout-root #container {
        padding-right: 0;
        padding-left: 0;
    }
    .layout-root #content {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0;
    }
    .layout-root .about-us-bottom {
        margin-right: 8px;
    }
    .layout-root .tools-help-button .btn,
    .layout-root .tools-preview-button {
        height: 32px;
        margin-top: 4px;
    }
    .layout-root .tools-help-button .dropdown-menu {
        width: 100%;
        min-width: 300px;
    }
    .layout-root .tools-help-button .dropdown-menu .txt2 {
        background: var(--main-background);
        padding: var(--space-small);
    }
    .layout-root .tools-generic-list .card-body {
        overflow-x: auto;
    }
}