/* Animaciones */
@keyframes dramatic-show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.is-dramatic {
    animation: dramatic-show 1s;
}

/* Base */
@-ms-viewport {
    width: device-width;
}

* {
    word-wrap: break-word;
    box-sizing: border-box !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-1);
}

h1 {
    font-size: 2.1rem;
}

h2 {
    font-size: 1.9rem;
}

h3 {
    font-size: 1.7rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.3rem;
}

h6 {
    font-size: 1.1rem;
}

h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
    display: block;
    font-weight: normal;
}

a:hover {
    color: var(--color-contrast);
}

small {
    font-size: 80%;
}

strong {
    color: inherit;
}

dl.spoiler .spoiler_content[hidden="until-found"] {
  display: none;
}

/* Ocultar elementos innecesarios */
#navbar-original,
.forum-head+.forumseparator-element,
.subforum-element .category-element>.forum-head,
:not(.category-element)+.forum-separator {
    display: none;
}

/* Clases genéricas */
.is-pointer {
    cursor: pointer !important;
}

.is-default {
    cursor: default !important;
}

.not-show,
.to-process {
    display: none !important;
}

.main-body {
    max-width: 1200px;
}

.is-full-width {
    width: 100% !important;
    max-width: 100% !important;
}

.is-no-links a {
    border: none !important
}

.mt-d {
    margin-top: 2rem;
}

.mb-d {
    margin-bottom: 2rem;
}

.is-two-columns-list {
    display: flex;
    flex-flow: wrap;
    margin: -.5rem;
}

.is-two-columns-list>li {
    width: 50%;
    padding: .5rem;
}

.columns:not(:last-child) {
    margin-bottom: -.75rem;
}

.is-tweakeable {
    display: block;
    width: 100%;
}

.is-measurable {
    white-space: nowrap;
}

.has-anchor {
    position: relative;
}

/* Selectbox */
.is-selectbox:not(.is-active) {
    display: none !important;
}

.is-clickbox {
    cursor: pointer !important;
}

.is-clickbox:not(.is-toggle).is-active {
    cursor: default !important;
}

/* Notificación */
#forum-notification {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    transition: 1s ease-in-out;
    z-index: 999;
}

#forum-notification:not(.notification-show) {
    transform: translateY(400px);
}

/* Elemento de carga */
#loading-element {
    padding: 1rem;
}

#loading-element,
#loading-content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: default;
}

#loading-content i {
    font-size: 1.25rem;
    margin-right: .5rem;
    color: var(--color-contrast);
}

#loading-content span {
    font-family: var(--font-1);
}

/* Cuerpo Principal */
#forum-body>.main-body {
    display: flex;
    margin: 0 auto;
    padding: 3rem 0;
}

#forum-body>.main-body>article {
    width: 100%;
}

#forum-body>.main-body>#right {
    display: none;
}

/* Widgets */
aside#left {
    display: none;
}

/* Bloque de actualización */
#forum-save {
    display: block;
}

/* Índice */
.category-element {
    margin-bottom: 3rem;
}

.category-element:last-child {
    margin: 0 !important;
}

/* Bloque de escribir mensaje */
#forum-rules {
    margin-bottom: 2rem;
}

#quickreply-section {
    margin-top: 3rem;
}

#forum-realreply {
    display: none;
}

#forum-reply {
    margin-bottom: 3rem;
}

#forum-reply:last-child {
    margin-bottom: 0;
}

#forum-reply+#privmsg-review #privmsg-see,
*:not(#forum-reply)+#privmsg-review #privmsg-write {
    display: none;
}

#usereply-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#usereply-top small {
    display: block;
    font-size: 50%;
}

.usereply-header {
    padding: 0 .5rem;
}

#usereply-editor {
    margin-top: 1.25rem;
    height: 250px;
    resize: none;
}

#usereply-buttons ul {
    display: flex;
    flex: 1 0 auto;
    justify-content: flex-end;
}

#usereply-buttons ul:first-child {
    margin-bottom: .5rem;
}

#usereply-buttons ul li {
    margin-left: .5rem;
}

#usereply-buttons ul li:first-child {
    margin-left: 0;
}

.usereply-button {
    display: flex;
    width: 2rem;
    height: 2rem;
    background: transparent;
    color: var(--color-contrast);
    border: 2px solid;
    padding: 0;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#usereply-comand {
    display: flex;
    justify-content: center;
}

.modal-buttons,
#usereply-comand {
    margin: 1rem -.5rem -.5rem -.5rem;
    flex-flow: wrap row;
}

.button2,
.button1,
input[type="Submit"],
input[type="reset"] {
    margin: .5rem;
}

.usereply-option {
    font-family: var(--font-1);
    cursor: pointer;
    font-size: .85rem;
    margin-bottom: .4rem;
    white-space: nowrap;
}

.usereply-option:last-child {
    margin: 0;
}

#usereply-buttons .dropdown-menu::before,
#usereply-buttons .dropdown-menu::after {
    right: 7px;
}

#usereply-dice {
    margin-top: 1.5rem;
}

#usereply-dice h3 {
    margin-bottom: 1.25rem;
}

#usereply-dice ul li {
    display: flex;
    counter-increment: special-list-counter;
    margin-bottom: 1rem;
}

#usereply-dice ul li:last-child {
    margin-bottom: 0;
}

#usereply-dice ul li::before {
    content: '#' counter(special-list-counter);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: 2rem;
    margin-right: .5rem;
    color: var(--color-contrast);
    font-family: var(--font-1);
}

#usereply-dice ul li .dice-more {
    width: 2rem;
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-contrast);
    font-size: 1rem;
    cursor: pointer;
}

#usereply-dice ul li .select-container {
    flex: 1 0 auto;
    width: inherit;
}

#usereply-dice ul li input {
    flex: 1 1 auto;
    width: inherit;
    max-width: 30%;
}

#usereply-dice ul li>* {
    margin-right: .5rem;
}

#usereply-dice ul li>*:last-child {
    margin-right: 0;
}

#usereply-extra {
    margin-bottom: 1.5rem;
}

#emoji-list {
    display: flex;
    flex-flow: wrap;
    overflow: auto;
    width: 220px;
    max-height: 205px;
    padding: 0;
}

#emoji-list iframe {
    width: 94%;
    margin: 3%;
}

.forum-otherposts {
    margin-top: 2rem;
}

.upper-controls+.forum-otherposts {
    margin-top: 0;
}

.forum-otherposts .post-profile {
    width: 224px;
}

.forum-otherposts .post-profile>* {
    display: block;
}

.forum-otherposts .post-datafields li {
    margin-bottom: 1rem;
}

.forum-otherposts .post-datafields li:last-child {
    margin-bottom: 0;
}

.forum-otherposts .datafield-name {
    font-family: var(--font-1);
}

.forum-otherposts .post-datafield a {
    font-family: inherit;
}

.post-content.no-links {
    justify-content: flex-end;
}

.post-content.no-links .is-content {
    max-width: initial !important;
}

#forum-preview {
    margin-bottom: 2rem;
}

#forum-preview .post-content {
    justify-content: center;
}

/* Bloque de wiki */
.wiki-body {
    display: flex;
    justify-content: space-between;
}

#forum-preview .post-content,
.wiki-body {
    max-width: 100%;
}

.wiki-index {
    align-self: flex-start;
    margin-right: 1.5rem;
}

.wiki-index h3 {
    margin-bottom: 1rem;
}

.wiki-index h3::before {
    display: none;
}

.wiki-index ul {
    padding-left: 2rem;
}

.wiki-index ul li:before {
    left: -2rem !important;
    width: 2rem !important;
    text-align: left !important;
}

.wiki-index .is-hidden-mobile {
    max-height: calc(100vh - 5rem);
    overflow: auto;
}

.wiki-index .router-link-exact-active.router-link-active {
    cursor: default;
}

.wiki-index li ul {
    margin-top: .5rem;
}

.wiki-index a {
    border: none !important;
    font-family: var(--font-1) !important;
}

.wiki-controls {
    font-family: var(--font-1);
    cursor: default;
}

.wiki-index .wiki-controls .wiki-cascade {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-contrast);
    cursor: pointer;
}

.wiki-index .router-link-exact-active.router-link-active,
.wiki-index li.is-selected>.wiki-controls>a .text {
    color: var(--color-2);
}

.wiki-index li:not(.is-active)>.wiki-controls+ul,
.wiki-index li:not(.is-active)>.wiki-controls>.wiki-cascade .fa-minus,
.wiki-index li.is-active>.wiki-controls>.wiki-cascade .fa-plus {
    display: none;
}

.wiki-content {
    display: flex;
    flex-flow: column;
    flex: 1 1;
    max-width: 600px;
}

.wiki-nav {
    margin-top: 2.5rem;
    margin-bottom: 1px !important;
}

/* Bloque de Mensajes Privados */
.input-real {
    display: none;
}

#mp-info {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.mp-main h3,
#mp-info h3 {
    margin: 0;
}

#mp-info img {
    display: none;
    width: 80px;
    border: 2px solid;
    margin-left: 0;
    margin-right: 1rem;
}

#mp-info h3 {
    font-size: 1.15rem;
}

.mp-from a {
    font-weight: bold;
}

.mp-main {
    border-top: 2px solid var(--color-contrast);
    padding-top: 1.5rem;
}

.mp-main>h3 {
    margin-bottom: 1.5rem;
}

.mp-main>h3>small {
    font-size: 60%;
}

.post .mp-main>h3>small {
    display: flex;
    justify-content: space-between;
}

/* Bloque del panel de control */
.field-element {
    margin-bottom: 1rem;
}

.field-element:last-child {
    margin-bottom: 0;
}

.forum-field {
    display: flex;
}

.forum-field .field-content {
    flex: 1 1 auto;
}

.has-no-label .field-name {
    display: none;
}

.has-button .field-content {
    display: flex;
    align-items: center;
}

.has-button .field-content .button2 {
    width: auto;
    margin: 0 0 0 .5rem;
}

.forum-checkbox {
    display: flex;
    justify-content: center;
}

.checkbox-content {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.forum-checkbox .checkbox-real,
.forum-checkbox:not(.is-active) i {
    display: none;
}

.forum-fieldlist:not(.is-horizontal) .forum-checkbox {
    max-width: 450px;
    justify-content: flex-start;
    margin: 0 auto;
    width: 100%;
}

/* Bloque de página en dos columnas */
.is-two-columns-page {
    display: flex;
}

/* Bloque de inicio de sesión */
#bloque-login .field-name {
    max-width: 180px;
}

/* Bloque de registro */
#frmAgreement .post-content {
    justify-content: center;
    max-width: 100%;
}

#frmAgreement .post-content .is-content {
    max-width: initial;
    padding: 0;
}

#frmAgreement .forum-fieldlist.no-style {
    margin-left: 1rem;
}

#frmAgreement .forum-fieldlist .forum-checkbox {
    margin: 0;
}

.field-catcha {
    margin-top: 1.5rem;
}

.field-catcha .g-recaptcha {
    display: flex;
    justify-content: center;
}

/* Bloque de cronología, relaciones y multicuentas */
.rp-list {
    margin-bottom: .725rem;
}

.rp-list:last-child {
    margin-bottom: 0;
}

.rp-element {
    display: flex;
    align-items: center;
}

.rp-icon {
    order: 0;
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    color: var(--color-contrast) !important;
    margin-right: .725rem;
}

.rp-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    max-width: calc(100% - 2rem);
}

.rp-name {
    display: flex;
    flex-flow: column;
    min-width: 0;
    line-height: 1.3rem;
    color: var(--color-2) !important;
    font-size: 1.15rem;
}

.rp-name>* {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

.rp-name>small {
    font-size: .925rem;
    font-family: var(--font-2);
}

.rp-manager {
    cursor: default;
}

.rp-manager .rp-content {
    max-width: 100%;
    justify-content: space-between;
}

.rp-controls {
    font-family: var(--font-1);
    color: var(--color-2);
    text-transform: uppercase;
    margin-left: 1rem;
    cursor: default;
}

.rp-controls span {
    color: var(--color-contrast);
    cursor: pointer;
}

.rela-element {
    display: flex;
}

.rela-element.rela-manager {
    cursor: default;
}

.rela-list .rela-element .rela-image {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 80px;
    height: 80px;
    margin-right: 1rem !important;
    border: 2px solid var(--color-contrast);
    border-radius: 100%;
    background-size: cover;
    background-position: center;
}

#forum-relationships .rela-title h4 {
    max-width: 370px;
}

.rela-title h4 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.15rem;
}

.rela-content {
    flex: 1 1 auto;
    color: var(--color-2);
    max-width: calc(100% - 80px - 1rem);
}

.rela-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rela-list {
    margin-bottom: 1rem !important;
}

.rela-list:last-child {
    margin-bottom: 0 !important;
}

.rela-list:last-child::after {
    display: none;
}

.small-text {
    margin-top: .25rem;
    font-family: var(--font-2);
    font-size: .925rem;
    line-height: 1.25rem;
}

.rela-text.is-content ul,
.rela-text.is-content ol {
    padding-left: 1.5rem;
}

.rela-text.is-content ol li::before,
.rela-text.is-content ul li::before {
    left: -1.5rem;
    width: 1.5rem;
}

.rela-text.is-content ol li,
.rela-text.is-content ul li {
    margin-bottom: .5rem;
}

#forum-multiaccount .field-name {
    text-transform: capitalize;
}

#forum-multiaccount .rp-controls {
    top: .55em;
}

#forum-multiaccount .rp-controls span {
    color: var(--color-1);
}

#forum-chronology .rp-name {
    max-width: 57vw;
}

/* Clases auxiliares */
ul.no-style {
    padding: 0 !important;
    list-style: none !important;
}

ul.no-style>li::before {
    content: '' !important;
    position: initial !important;
}

ul.no-style a {
    border: none !important;
}

/* Ajustes responsive */
body>header,
body>footer,
body>section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

@media only screen and (max-width: 1023px) {

    html {
        scroll-behavior: smooth;
    }

    header.forum-panel {
        min-height: initial;
    }

    .wiki-body {
        flex-flow: column;
    }

    .wiki-content {
        max-width: 100% !important;
    }

    .wiki-index {
        position: inherit !important;
        width: 100%;
        margin-bottom: 2rem;
        margin-right: 0;
    }

    .is-two-columns-page .is-second {
        order: 0;
    }

    .is-two-columns-page .is-first {
        order: 1;
    }
}

@media only screen and (max-width: 768px) {

    #forum-modal .modal-element {
        max-width: 95%;
        width: 100%;
    }

    .forum-field .date-dmy label input {
        margin-left: .5rem;
    }

    .rela-image {
        display: none;
    }

    .rela-content {
        width: 100%;
        max-width: 100%;
    }

    .post .mp-main>h3,
    .forum-otherposts .post-profile {
        position: initial;
        width: 100% !important;
        margin-right: 0;
        margin-bottom: 1.5rem;
    }

    .post .mp-main small {
        font-size: 1rem;
    }

    .post-content,
    .post-content .is-content {
        max-width: none;
    }

    .is-two-columns-list>li {
        width: 100%;
    }
}

@media only screen and (max-width: 487px) {
    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.55rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    h5 {
        font-size: 1.1rem;
    }

    .forum-field {
        flex-flow: column;
    }

    .forum-field .field-name {
        height: .925rem;
        line-height: .925rem;
        max-width: initial !important;
        margin-right: 0 !important;
        margin-bottom: .825rem !important;
        border-bottom: 0 !important;
    }

    #frmAgreement .forum-fieldlist.no-style {
        margin-left: 0;
    }

    .button2,
    .button1,
    input[type="Submit"],
    input[type="reset"] {
        width: 100%;
    }
}

/* Ajustes generales */
@supports ((-webkit-hyphens:auto) or (hyphens:auto)) {
    .is-content {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}