MediaWiki:Common.css

De Omnis Bibliotheca
Version datée du 25 janvier 2025 à 13:13 par Blacklisted Jack (discussion | contributions) (fix)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à :navigation, rechercher

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

  • Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
  • Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
  • Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
  • Opera : appuyez sur Ctrl + F5.
/** Polices d'écritures : **/
@import url("//fonts.googleapis.com/css2?family=Grenze+Gotisch&family=Iceland&family=UnifrakturCook:wght@700&display=swap");

.page-wrapper {
    scroll-padding-top: 60px;
}


/** Affichage des titres pour smartphone **/
@media screen and (max-width: 1023px) {
    body.page-Accueil .contentHeader {
        display: none !important;
    }

    body.page-Accueil.OB div#bodyContent {
        margin-top: 20px !important;
    }

    body .contentHeader,
    body.OB .contentHeader,
    body.OB.theme .contentHeader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 150px;
        background: radial-gradient(#031516, black 70%) !important;
    }

    body .contentHeader h1#firstHeading,
    body.OB .contentHeader h1#firstHeading,
    body.OB.theme .contentHeader h1#firstHeading {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-50%);
        background: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    body.OB.theme .contentHeader #firstHeading::after {
        content: none !important;
        color: transparent !important;
        font-size: 0 !important;
        text-shadow: none !important;
    }

    .contentHeader h1#firstHeading .mw-page-title-namespace,
    .contentHeader h1#firstHeading .mw-page-title-separator {
        display: none;
    }

    body .contentHeader h1#firstHeading>span.mw-page-title-main,
    body.OB .contentHeader h1#firstHeading>span.mw-page-title-main,
    body.OB.theme .contentHeader h1#firstHeading>span.mw-page-title-main {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100vw;
        white-space: nowrap;
        padding: 20px;
        color: white !important;
        text-shadow: 0 0 black !important;
        font-family: 'Grenze Gotisch', cursive;
        font-size: 1.8rem !important;
    }

    body div#bodyContent,
    body.OB div#bodyContent,
    body.OB.theme div#bodyContent {
        top: 0 !important;
        position: relative;
        background: black !important;
        margin-top: 150px !important;
        padding-top: 0 !important;
    }

    body div#content,
    body.OB div#content,
    body.OB.theme div#content {
        padding-top: 0 !important;
    }
}

/** Misc. layout **/
.flex-1 {
    flex: 1;
}

/** fix page menu layout **/
div#toc a {
    flex-wrap: nowrap;
    white-space: nowrap;
}

body .explorer-menu-item-desc-title {
    text-shadow: 0 0 2px #000, 0 0 3px #30e2ff, 0 0 5px #30e2ff !important;
}

body .explorer-menu-item-desc {
    width: 270px;
}

.mw-body div.thumbinner {
    max-width: 100%;
}

/** Accueil  **/
#dallage-grid-left .dallage-inner::before,
#dallage-grid-right .dallage-inner::before,
#dallage-grid-left .dallage-inner::after,
#dallage-grid-right .dallage-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200000;
    background: url(/images/e/eb/Black_leather_bg.jpg) black;
}

#dallage-grid-left .dallage-inner::after,
#dallage-grid-right .dallage-inner::after {
    height: 400px;
    box-shadow: inset 0 -2px 1px #ffffff30, inset 0 -2px 25px #547777, inset 0 0 150px #6cc7c5, 0 0 0 20px #0d2f34, 0 0 30px 20px black;
}

#dallage-grid-left .dallage-inner::before,
#dallage-grid-right .dallage-inner::before {
    --offset-pane: 1000px;
    top: var(--offset-pane);
    height: calc(100% - var(--offset-pane));
    box-shadow: inset 0 2px 1px #ffffff30, inset 0 2px 25px #547777, inset 0 0 150px #6cc7c5, 0 0 0 5px #0d2f34, 0 0 30px 5px black;
}

/*************************************/
/** TODO: A TRANSFERER vers le skin **/
/*************************************/

body.OB h1,
body.OB h2,
body.OB h3,
body.OB h4,
body.OB h5,
body.OB h6 {
    text-align: left;
}

@media print {
    .page-wrapper {
        position: relative !important;
        height: auto !important;
    }

    body .page-wrapper div#content,
    body.OB .page-wrapper div#content,
    body.OB.theme .page-wrapper div#content {
        box-shadow: none !important;
    }

    #firstHeading,
    #firstHeading *,
    h1,
    h1 *,
    h2,
    h2 *,
    h3,
    h3 *,
    h4,
    h4 *,
    h5,
    h5 *,
    h6,
    h6 * {
        color: black !important;
    }
}

.container {
    max-width: 1400px;
}

.mw-parser-output {
    text-align: justify;
}

@media screen and (max-width: 1023px) {
    .page-wrapper>.container>.row>.col {
        padding-left: 0;
        padding-right: 0;
    }

    a.image img {
        max-width: 100%;
        height: auto;
    }

    mw-parser-output,
    body.OB.theme .mw-parser-output {
        padding: 0 1em !important;
    }

    .theme-spacer {
        height: 140px;
        pointer-events: none;
        display: block !important;
    }

    div#content,
    body.OB div#content,
    body.OB.theme div#content {
        background: black !important;
    }

    body.OB span.mw-page-title-namespace,
    body.OB span.mw-page-title-separator,
    body.OB.theme span.mw-page-title-namespace,
    body.OB.theme span.mw-page-title-separator,
    {
    display: none !important;
}

body.OB #firstHeading,
body.OB.theme #firstHeading {
    top: 75px;
    max-width: 100%;
    font-size: 0;
    white-space: nowrap;
}

body.OB .mw-parser-output>ul:last-of-type {
    clear: both;
}
}

/** Titre page**/
span#firstHeadingTitle {
    padding: 0 0.2em;
}

/** Titre paragraphes **/
body.OB h1,
body.OB h2 {
    border: none;
    background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black;
    padding: 0.5em;
    box-shadow: inset 1px 1px #ffffff03, inset 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black !important;
}

a[href].new {
    color: #dd3333;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

/** Style des références (sources): **/
body.OB .mw-references-wrap {
    margin-top: 2em;
}

body.OB .mw-references-wrap li {
    padding: 6px 24px;
    margin: 1rem 0;
    border: 1px solid black;
    color: rgb(209 209 209);
    border-radius: 3px;
    background: linear-gradient(transparent 50%, black), linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black;
    box-shadow: inset 1px 1px #ffffff03, inset 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black, inset 0 -50px 50px black, 0 4px 8px #000;
}

body.OB .mw-references-wrap li:first-child {
    margin-top: 0;
}

body.OB .mw-references-wrap li:last-child {
    margin-bottom: 0;
}

body.OB .mw-references-wrap li:target,
sup.reference:target {
    box-shadow: inset 1px 1px #ffffff03, inset 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black, inset 0 -50px 50px #00000085, 0 4px 8px #000 !important;
    background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) rgba(0, 127, 255, 0.133) !important;
}

/** Layout globale de page : **/
#content {
    overflow: hidden;
    position: relative;
}

/** Lazy loader : **/
.lazy-loading-tag {
    display: inline-flex;
    -webkit-mask-image: url('/images/7/7d/LoadMechanicus.png');
    -webkit-mask-size: 100% 100%;
    mask-image: url('/images/7/7d/LoadMechanicus.png');
    mask-size: 100% 100%;
}

.lazy-loader[data-state="sleep"],
.lazy-loader[data-state="sleep"]~*,
.lazy-loader[data-state="loading"]~* {
    display: none !important;
}


/** Previews Random **/


.preview {
    display: inline-flex;
    perspective: 1200px;
    perspective-origin: center 30%;
}

.preview * {
    transition: 0.5s all ease-in-out;
    user-select: none;
}

.preview-ref {
    display: none;
}

.preview-container {
    background: linear-gradient(transparent 50%, black), linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black;
    box-shadow: inset 1px 1px #ffffff03, inset 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black, inset 0 -50px 50px black;
    display: inline-flex;
    flex-flow: column;
    height: 420px;
    min-height: 420px;
    width: 280px;
    min-width: 280px;
    border-radius: 10px 10px 0 0;
    text-align: left;
    position: relative;
    margin: 0 5px 20px 5px;
    overflow: hidden;
}

.preview-title {
    text-align: center;
    border-radius: 10px 10px 0 0;
    margin: 1px;
    box-shadow: 0 4px 8px #000, inset 0 0 10px #000, inset 0 0 10px #000;
    background: #131414;
}

.preview-title a[title] {
    text-decoration: none;
    font-weight: normal;
    font-size: 110%;
    padding: 10px 0;
    display: block;
    border-radius: 10px 10px 0 0;
    color: white !important;
}

.preview-title a:hover {
    color: #fff !important;
    text-shadow: 0 0 2px #000, 0 0 3px #30e2ff, 0 0 5px #30e2ff !important;
    background: linear-gradient(#121313, #526c651c 1px, transparent);
    box-shadow: inset 0 0 10px #000;
}

.preview-page-bg {
    margin: 8px;
    border-radius: 5px 5px 0 0;
    box-sizing: border-box;
    position: absolute;
    top: 40px;
    height: calc(100% - 80px);
    width: calc(100% - 16px);
    z-index: 1;
    overflow: hidden;
    transition: 0.5s all ease-in-out;
}

.preview-page-bg::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    box-shadow: inset 0 0 0 1px #8685829e, inset 0 0 15px white, 0 0 5px -2px black;
    border-radius: 5px 5px 0 0;
}

.preview-page-bg::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    box-shadow: inset 0 0 0 1px #868582, inset -3px 3px #c3b49d, 0 0 5px -2px black;
    border-radius: 5px 5px 0 0;
}

.preview-page {
    margin: 8px;
    overflow: hidden;
    font-size: 95%;
    -webkit-mask-image: linear-gradient(black 50%, transparent 280px);
    mask: linear-gradient(black 50%, transparent 280px);
    padding: 20px;
    border-radius: 5px;
    box-sizing: border-box;
    position: absolute;
    color: #553b1e;
    z-index: 2;
    transition: 0.3s;
    top: 46px;
    right: 6px;
    height: calc(100% - 22px);
    width: calc(100% - 22px);
    transition: 0.5s all ease-in-out;
}

.preview-container.random .preview-page {
    -webkit-mask-image: linear-gradient(black 50%, transparent 90%);
    mask-image: linear-gradient(black 50%, transparent 90%);
}

.preview-page a,
.preview-page a:visited,
.preview-page a:hover,
.preview-page a[href].new,
.preview-page [data-popover-link],
.preview-page .popover-link {
    color: #553b1e !important;
    text-decoration: none !important;
    text-shadow: none !important;
}
.preview-page span[data-popover-link]::after,
.preview-page a[data-popover-link]::after {
    content: none;
}
.preview-page a:hover {
    color: #fdfdfd;
    text-shadow: 0 0 1px black, 0 0 2px black;
}
.preview-page a[href].new {
    color: #cc2200;
    text-shadow: none;
}

.preview-background-image {
    position: absolute;
    top: 40px;
    left: 0;
    max-height: 325px;
    overflow: hidden;
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(black, transparent);
    mask: linear-gradient(black, transparent);
    transform: translateY(-50%);
}

.preview-footer {
    width: 100%;
    padding: 10px;
    background: #000;
    box-shadow: inset 0 0 0 1px #ffffff1c, 0 -5px 5px -5px black, inset 0 0 10px black;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    align-items: center;
    min-height: 40px;
    flex-wrap: wrap;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.preview-footer>* {
    padding: 2px 5px;
    border-radius: 5px;
    white-space: nowrap;
    font-weight: lighter;
    font-size: 90%;
    background: #2b0d0db0;
    opacity: 0.8;
    margin: 0 5px 10px;
    box-sizing: border-box;
    text-overflow: initial;
    overflow: initial;
    display: block;
}

.preview-footer a[title] {
    color: lightgrey !important;
}

.preview-footer a[title]:hover {
    text-decoration: none !important;
}

.preview-footer a[title]:hover {
    color: white !important;
    opacity: 1;
    background: #2b0d0d;
}

.preview-navigator {
    position: absolute;
    left: 0;
    z-index: 3;
    background: linear-gradient(transparent, black);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 46px;
    height: calc(100% - 86px);
    background-position: center bottom;
    background-size: 100% 50px;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

.preview-navigator a[title],
.preview-navigator a[title]:visited {
    font-weight: normal;
    color: #2b1702 !important;
    transition: all 0.2s ease-in-out;
    text-shadow: 0 0 5px #fff3;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 18px;
    font-family: 'Grenze Gotisch', cursive;
    padding-bottom: 10px;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding-top: 280px;
}

.preview-navigator a:hover {
    text-shadow: 0 0 5px white, 0 0 10px white;
}

.preview-random-img img {
    -webkit-mask: linear-gradient(90deg, transparent, black 20%, black 95%, transparent);
    mask: linear-gradient(90deg, transparent, black 20%, black 95%, transparent);
}

.preview-random-img {
    position: absolute;
    top: 105px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    -webkit-mask: radial-gradient(black, transparent);
    mask: radial-gradient(black, transparent);
    transition: 0.5s all ease-in-out;
}

.preview:hover .preview-page-img {
    scale: 1.05;
}

.preview-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(#00000030 1px, transparent 2px, transparent 100%), linear-gradient(90deg, #00000030 1px, transparent 2px, transparent 100%);
    background-size: 100% 8px, 8px 100%;
    -webkit-mask: radial-gradient(transparent 60%, black);
    mask: radial-gradient(transparent 60%, black);
    opacity: 0.5;
}

.preview-page::after {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    width: calc(100% - 12px);
    box-shadow: inset 0 0 0 1px #2d1515ba, inset 0 0 0 2px #731919;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 22px, 100% 100%, 0 100%);
    opacity: 0.5;
}

.preview-container.random .preview-footer a {
    font-size: 18px;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-page>a:first-child {
    position: absolute;
    font-size: 0;
    color: transparent;
    top: 0;
    right: 0;
    width: 35px;
    height: 25px;
    z-index: 5;
    border-radius: 0 0 0 8px;
    clip-path: polygon(-20% -20%, 120% 120%, -20% 120%);
    box-shadow: inset 1px -1px 0 #938a7a, 0 0 5px, 0 0 5px #a7977a;
    transform: translateX(18px) rotate(32deg);
    transform-origin: left top;
    background: linear-gradient(45deg, #eadabf 30%, #37230d);
}

.preview-page>a:first-child:hover {
    background: linear-gradient(45deg, #d5c3a4 30%, #553717);
}

.preview-page-img {
    position: absolute;
    width: 200px;
    height: 280px;
    background: black;
    top: 50%;
    box-shadow: 2px 2px 20px black;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ffffff17;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-page-img.right {
    right: 0;
    transform: translateY(-45%) translateX(100%) rotateY(-41deg);
}

.preview-page-img.left {
    left: 0;
    transform: translateY(-45%) translateX(-100%) rotateY(41deg);
}

.preview-page-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1px #ffffff38;
    background: linear-gradient(transparent, transparent 6px, #6af1f84d 20px, #ffffff8b 13px, #6af1f84d 16px, transparent), linear-gradient(rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 2px, rgba(128, 128, 128, 0.1) 2px, rgba(128, 128, 128, 0.1) 4px);
    background-size: 100% 20px, auto 4px;
    background-position: 0 -30px, center center;
    background-repeat: no-repeat, repeat;
    opacity: 0.6;
    border-radius: 10px;
}

.preview-symbol {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

#previews-wrapper {
    --preview-wrapper-bg: black;
    position: relative;
    margin: 0 auto 60px auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    width: 1100px;
    box-sizing: border-box;
    justify-content: center;
    max-width: 100%;
}

#previews-wrapper>* {
    margin: 40px 40px 0 !important;
    transition: 0.3s all ease-in-out;
    z-index: 1;
}

#previews-wrapper> :nth-child(2n+1) {
    justify-self: end;
}

#previews-wrapper> :nth-child(2n) {
    justify-self: start;
}

.preview-section-subtitle {
    text-align: center;
    letter-spacing: 2px;
    font-family: 'Grenze Gotisch', cursive;
    font-size: 18px;
    font-style: normal;
    color: #403e3e;
    padding: 10px;
    text-shadow: 0 0 3px #00000021, 0 0 15px #00000057;
}


#previews-wrapper>.preview-refresh-btn {
    position: absolute;
    top: 500px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%);
    box-shadow: inset 0 0 0 1px #27272782, inset 0 0 10px black, inset 0 0 10px #000, 0 4px 3px black;
    cursor: pointer;
    font-size: 32px;
    color: white;
    user-select: none;
    padding: 5px 5px 4px 5px;
    transition: 0.3s all ease-in-out;
    z-index: 0;
}

#previews-wrapper>.preview-refresh-btn:hover {
    box-shadow: inset 0 0 0 1px #27272782, inset 0 0 10px black, inset 0 0 10px #000, 0 0 2px white, 0 0 10px #30e2ff, 0 0 100px #30e2ff;
}

#previews-wrapper[status="loading"]>.preview-refresh-btn {
    pointer-events: none !important;
    box-shadow: inset 0 0 0 1px #27272782, inset 0 0 10px black, inset 0 0 10px #000, 0 0 2px white, 0 0 10px #30e2ff, 0 0 100px #30e2ff;
}

.preview-refresh-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: conic-gradient(transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent, var(--preview-wrapper-bg), transparent);
    transform: translate3d(-50%, -50%, 0);
    -webkit-mask: radial-gradient(transparent 30px, black 70px, transparent 70%);
    mask: radial-gradient(transparent 30px, black 70px, transparent 70%);
    border-radius: 50%;
    box-shadow: inset 0 0 20px black;
    pointer-events: none;
    animation: 5s center-rotation infinite linear;
    animation-play-state: paused;
    opacity: 0;
}

.preview-refresh-btn:hover::after {
    opacity: 1;
}

#previews-wrapper[status="loading"] .preview-refresh-btn::after {
    animation-play-state: running;
    opacity: 1;
}

#previews-wrapper>.preview-refresh-btn>div {
    background: black;
    height: 50px;
    width: 50px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 1;
    box-shadow: inset 1px 1px #ffffff03, inset 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black, inset 0 0 20px black, inset 0 0 20px black;
    background: linear-gradient(135deg, #717978a0, #414444a0, #575b5ba0, #232625a0, #3c4240a0, #1f2322a0, #717978a0, #414444a0, #575b5ba0, #232625a0, #3c4240a0, #1f2322a0) #2f2d2d !important;
    font-size: 40px;
    padding-bottom: 6px;
    box-sizing: border-box;
    text-shadow: 0 0 2px #000, 0 0 3px #59595970, 0 0 5px #ffffff73 !important;
    color: black;
}

#previews-wrapper>.preview-refresh-btn:hover>div {
    text-shadow: 0 0 2px #ff3030, 0 0 3px #ff3030, 0 0 5px #ff3030 !important;
    color: white;
}

#previews-wrapper[status="loading"]>.preview-refresh-btn:hover>div {
    color: black !important;
    text-shadow: 0 0 2px #000, 0 0 3px #59595970, 0 0 5px #ffffff73 !important;
    opacity: 1 !important;
}

#previews-wrapper>.preview-refresh-btn img {
    position: relative;
    pointer-events: none;
    transition: 2s all ease-in-out;
    z-index: 0;
    transform: rotate(0deg);
    border-radius: 50%;
    overflow: hidden;
    width: 70px;
    height: 70px;
}

#previews-wrapper>.preview-refresh-btn:hover img {
    transform: rotate(180deg);
}

/** Adjust Style for dynamic Preview resfresh: **/
#previews-wrapper * {
    transition: 0.5s all ease-in-out;
    user-select: none;
}

#previews-wrapper[status="loading"] .preview-footer a {
    opacity: 0;
    pointer-events: none;
}

#previews-wrapper[status="loading"] .preview * {
    color: transparent !important;
    text-shadow: none !important;
    pointer-events: none;
}

#previews-wrapper[status="loading"] .preview-page,
#previews-wrapper[status="loading"] .preview-page-bg {
    transform: translateY(100%);
}

.preview {
    transform-style: preserve-3d;
}

.preview-page-img {
    transition: 0.5s all ease-in-out;
    backface-visibility: hidden;
}

#previews-wrapper[status="loading"] .preview-page-img.left {
    transform: translateY(-45%) translateX(-100%) rotateY(calc(180deg + 41deg));
}

#previews-wrapper[status="loading"] .preview-page-img.right {
    transform: translateY(-45%) translateX(100%) rotateY(calc(-180deg - 41deg));
}

.preview-page-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: 1s all ease-in-out;
    box-shadow: inset 0 0 0 1px #000;
}

#previews-wrapper[status="loading"] .preview-page-img::before {
    box-shadow: inset 0 0 500px 250px black;
}

#previews-wrapper[status="loading"] .preview-footer a {
    position: relative;
    transform: translateX(-300px);
}

@-webkit-keyframes center-rotation {
    from {
        transform: translate3d(-50%, -50%, 0) rotate(0);
    }

    to {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

@keyframes center-rotation {
    from {
        transform: translate3d(-50%, -50%, 0) rotate(0);
    }

    to {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

/** Theme Votann features  **/
.votann-runes-mask {
    -webkit-mask-image: url('/images/e/ea/VotannRunes.png');
    -webkit-mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat repeat;
    -webkit-mask-position-x: center;
    mask-image: url('/images/e/ea/VotannRunes.png');
    mask-size: 100% auto;
    mask-repeat: no-repeat repeat;
    mask-position-x: center;
}

.votann-runes-wrapper {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-image: url('/images/e/ea/VotannRunes.png');
    -webkit-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
    -moz-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
    -ms-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
    -o-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
    filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
}

.votann-symbol-wrapper {
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-image: url(/images/b/b0/VotannFactionSymbol.png);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
    -moz-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
    -ms-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
    -o-filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #00f3ff);
    filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px #0d0d0da3);
}

.votann-symbol-wrapper.back {}

.votann-symbol-mask {
    -webkit-mask-image: url(/images/b/b0/VotannFactionSymbol.png);
    -webkit-mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-image: url(/images/b/b0/VotannFactionSymbol.png);
    mask-size: 100% auto;
    mask-repeat: no-repeat;
    mask-position: center center;
    height: 100%;
}

/** Theme Ork features  **/
body.OB.theme-ork .mw-parser-output h3 {
    background: linear-gradient(#000, #0000 50%), url('/images/6/69/Deco-ork-6.jpg'), linear-gradient(#601717, #601717) !important;
    padding-bottom: 31px;
    background-size: auto 22px, auto 22px, auto 27px !important;
    background-position-y: bottom !important;
    background-repeat: no-repeat !important;
    /* mask: linear-gradient(black 80%, transparent 120%); */
    box-shadow: inset 10px 0 10px -10px black, inset -10px 0 10px -10px black !important;
}

body.OB.theme-ork .mw-parser-output h1,
body.OB.theme-ork .mw-parser-output h2 {
    border: none;
    background: linear-gradient(#000, #0000 50%), url(/images/6/69/Deco-ork-6.jpg), linear-gradient(#601717, #601717), linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) #011712;
    padding: 0.5em;
    box-shadow: inset 0 1px 0 #272727, inset 0 0 10px black, inset 0 0 20px black !important;
    padding-bottom: 31px;
    background-size: auto 22px, auto 22px, auto 27px, auto auto !important;
    background-position-y: bottom !important;
    background-repeat: no-repeat !important;
}

body.OB.theme-ork #deco-top-middle-border {
    background: url('/images/5/5e/Deco-ork-3.jpg');
    background-size: auto 100%;
}

/** Encadré style Asuryani **/
body.OB.theme .asuryani-pane-1 {
    padding: 1em;
    border-radius: 20px;
    text-shadow: 0 0 5px black;
    max-width: 100%;
    color: #ccd7db !important;
    border: 1px solid #6171711c !important;
    box-shadow: 0 10px 10px -10px black, 0 20px 20px -20px black, 0 30px 30px -30px black, inset 0 0 2px 5px #00000070;
    background: linear-gradient(135deg, #03807047 0, #013c3c47 25%, #015b5b47 40%, #001a1e47 55%, #013b4447 75%, #00040347 85%);
}

body.OB.theme .asuryani-pane-2 {
    background: #9dbdc226;
    padding: 1em;
    border-radius: 20px;
    box-shadow: 0 4px 4px -2px #66848c;
    max-width: 100%;
}

body.OB.theme .asuryani-pane-3 {
    color: #90b9b5;
    padding: 60px 0;
    clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 calc(100% - 60px));
    width: calc(100% + 100px);
    transform: translateX(-50px);
    background: linear-gradient(2deg, black 50px, transparent 100px, transparent calc(100% - 100px), black calc(100% - 50px)), linear-gradient(135deg, #03807047 0, #013c3c47 25%, #015b5b47 40%, #001a1e47 55%, #013b4447 75%, #00040347 85%) #0f141c;
    box-shadow: 0 10px 10px -10px black, 0 20px 20px -20px black, 0 30px 30px -30px black, inset 0 0 2px 5px #00000070;
    clear: both;
}

/** Cadre custom necromunda **/
.cadre-custom-necromunda {
    width: 800px;
    max-width: 100%;
    position: relative;
    padding: 3em;
    box-sizing: border-box;
    margin: 40px auto;
    background: url(/images/0/0f/Parchemin.jpg);
    font-family: 'Grenze Gotisch', cursive;
    font-size: 1rem;
    color: #3c2407;
    box-shadow: inset 0 0 10px 9px #473720, inset 0 0 20px 9px #473720;
}

.cadre-custom-necromunda .ccn-deco {
    pointer-events: none;
    position: absolute;
}

.cadre-custom-necromunda .ccn-corner {
    pointer-events: none;
    position: absolute;
    left: 0;
    width: 100%;
}

.cadre-custom-necromunda .ccn-deco.p-top {
    top: 0;
}

.cadre-custom-necromunda .ccn-deco.p-bottom {
    bottom: 0;
}

.cadre-custom-necromunda .ccn-deco.p-left {
    left: 0;
}

.cadre-custom-necromunda .ccn-deco.p-right {
    right: 0;
}

.cadre-custom-necromunda .ccn-corner.p-top>.image {
    position: absolute;
    top: 0;
    z-index: 10;
}

.cadre-custom-necromunda .ccn-corner.p-bottom>.image {
    position: absolute;
    bottom: 0;
    z-index: 10;
}

.cadre-custom-necromunda .ccn-corner.p-top>.image:first-child {
    left: 0;
    transform: scaleX(-1);
}

.cadre-custom-necromunda .ccn-corner.p-top>.image:last-child {
    right: 0;
}

.cadre-custom-necromunda .ccn-corner.p-bottom>.image:first-child {
    right: 0;
    transform: scaleX(-1);
}

.cadre-custom-necromunda .ccn-corner.p-bottom>.image:last-child {
    left: 0;
}

.ccn-deco.ccn-border {
    border: 1px solid #4e3e25;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 5;
}

.cadre-custom-necromunda .ccn-border.p-top,
.cadre-custom-necromunda .ccn-border.p-bottom {
    width: 100%;
    height: 8px;
    left: 0;
    background: url("/images/5/59/Cadre-necromunda-border-h.jpg");
}

.cadre-custom-necromunda .ccn-border.p-left,
.cadre-custom-necromunda .ccn-border.p-right {
    width: 8px;
    height: 100%;
    top: 0;
    background: url("/images/e/eb/Cadre-necromunda-border.jpg");
}

.cadre-custom-necromunda .ccn-deco.ccn-sign.p-top {
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(-43px);
    z-index: 20;
}

.cadre-custom-necromunda .ccn-title {
    font-size: 1.6rem;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 5px;
    box-shadow: 0 0 0px 2px #6f5f466b, 0 0 0px 7px #dac7a7, 0 0 0px 12px #4d130f85;
    margin-bottom: 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.cadre-custom-necromunda .ccn-title :first-child {
    font-size: 280%;
    margin-right: 5px;
    height: 100%;
    display: flex;
    padding-bottom: 8px;
    color: #4d130fd4;
    text-shadow: 0 0 2px #d5c4a6;
}

.cadre-custom-necromunda .ccn-deco.ccn-stamp {
    right: 0;
    opacity: 0.5;
    top: 50px;
    z-index: 0;
}

.cadre-custom-necromunda .ccn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cadre-custom-necromunda .ccn-content p {
    margin: 0;
}

.cadre-custom-necromunda .ccn-deco.ccn-seal {
    position: absolute;
    bottom: 0;
    right: 90px;
    transform: translateY(20%);
    z-index: 15;
}

.cadre-custom-necromunda .ccn-separator {
    height: 10px;
    display: flex;
    align-items: center;
}

.cadre-custom-necromunda .ccn-tree-fork {
    display: flex;
    align-items: start;
    width: 100%;
}

.cadre-custom-necromunda .ccn-tree-fork> :first-child {
    text-align: right;
    margin: 10px 10px 0 0;
    flex: 1;
}

.cadre-custom-necromunda .ccn-tree-fork> :last-child {
    text-align: right;
    margin: 10px 0 0 10px;
    flex: 1;
}

.cadre-custom-necromunda .ccn-tree-fork>*>* {
    padding-bottom: 4px;
}

.cadre-custom-necromunda .ccn-tree-fork> :first-child>* {
    text-align: right;
    position: relative;
    padding-right: 10px;
}

.cadre-custom-necromunda .ccn-tree-fork> :first-child> ::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background: #3c2407;
}

.cadre-custom-necromunda .ccn-tree-fork> :last-child>* {
    text-align: left;
    position: relative;
    padding-left: 10px;
}

.cadre-custom-necromunda .ccn-tree-fork> :last-child> ::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background: #3c2407;
}

/** Filtre vitraux pour le theme Sororitas. **/
body.theme-sororitas .deco-left>.deco-left-1 img,
body.theme-sororitas .deco-right>.deco-right-1 img {
    filter: hue-rotate(50deg) brightness(1.4) saturate(0.5);
}

/** Effet sur le sigle libre-marchand **/
body.OB.theme.theme-jdr-rogue-trader .deco-top-middle-sigil .image {
    display: block;
    -webkit-mask: url('/images/9/92/Symbol_libre-marchand.png');
    mask: url('/images/9/92/Symbol_libre-marchand.png');
}

/** theme JDR imperium maledictum **/
.jdr-imperium-maledictum-margin-bg {
    background: url("/images/thumb/2/29/Imperium-maledictum-margin.jpg/100px-Imperium-maledictum-margin.jpg");
}

/** theme Drukhari **/
.side-drukhari-margin-bg {
    background: linear-gradient(-90deg, transparent, black), url(/images/5/54/Side-drukhari.jpg) black;
    background-size: 150px 900px;
    background-repeat: no-repeat;
}

body.OB.theme.theme-drukhari .deco-left-1::after {
    background: url(/images/4/4f/Drukhari-side_left.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: -50px top !important;
    -webkit-mask-image: linear-gradient(130deg, black, transparent 500px);
    mask: linear-gradient(130deg, black, transparent 500px);
    opacity: 0.5;
    filter: sepia(0.5) hue-rotate(230deg);
}

body.OB.theme.theme-drukhari .deco-right-1::after {
    background: url(/images/b/be/Drukhari-side_right.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: -80px -50px !important;
    -webkit-mask-image: linear-gradient(130deg, black, transparent 500px);
    mask: linear-gradient(130deg, black, transparent 500px);
    opacity: 0.5;
    filter: sepia(0.5) hue-rotate(230deg);
    transform: scale(-1, 1);
}

/** theme Arlequin **/
.side-arlequin-margin-bg {
    background: linear-gradient(-90deg, transparent, black), url(/images/4/49/Side-arlequin.jpg) black;
    background-size: 175px 310px;
}

body.OB.theme.theme-Arlequin .deco-left-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/1/15/Arlequin-side_left.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: -80px top !important;
    -webkit-mask-image: linear-gradient(130deg, black, transparent 400px);
    mask: linear-gradient(130deg, black, transparent 400px);
    opacity: 0.5;
    filter: sepia(0.5);
}

body.OB.theme.theme-Arlequin .deco-right-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/7/7a/Arlequin-side_right.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: -80px -50px !important;
    -webkit-mask-image: linear-gradient(130deg, black, transparent 500px);
    mask: linear-gradient(130deg, black, transparent 500px);
    opacity: 0.5;
    filter: sepia(0.5);
    transform: scaleX(-1);
}

/** theme Ynnari **/
.side-ynnari-margin-bg {
    background: linear-gradient(-90deg, transparent, black), url(/images/5/54/Side-drukhari.jpg) black;
    background-size: 150px 900px;
    background-repeat: no-repeat;
}

body.OB.theme.theme-Ynnari .deco-left-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/6/65/Ynnari-side_left.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: -50px top !important;
    -webkit-mask-image: linear-gradient(130deg, black, transparent 500px);
    mask: linear-gradient(130deg, black, transparent 500px);
    opacity: 0.5;
    filter: sepia(0.5) hue-rotate(230deg);
}

body.OB.theme.theme-Ynnari .deco-right-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/3/3f/Ynnari-side_right.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: -40px 0px !important;
    -webkit-mask-image: linear-gradient(130deg, black, transparent 400px);
    mask: linear-gradient(130deg, black, transparent 400px);
    opacity: 0.5;
    filter: sepia(0.5) hue-rotate(230deg);
    transform: scale(-1, 1);
}

/** theme Imperium **/
.side-imperium-margin-bg {
    background: linear-gradient(-90deg, transparent, black), url("/images/thumb/2/29/Imperium-maledictum-margin.jpg/100px-Imperium-maledictum-margin.jpg");
    background-size: 150px 900px;
}

body.OB.theme.theme-Imperium .deco-left-1::after,
body.OB.theme.theme-Inquisition .deco-left-1::after,
body.OB.theme.theme-assassinorum .deco-left-1::after,
body.OB.theme.theme-adeptus-ministorum .deco-left-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/c/c4/Imperium-side_left.jpg) !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: linear-gradient(130deg, black, transparent 500px);
    mask: linear-gradient(130deg, black, transparent 500px);
    opacity: 0.8;
    filter: sepia(0.5) hue-rotate(150deg);
}

body.OB.theme.theme-Imperium .deco-right-1::after,
body.OB.theme.theme-Inquisition .deco-right-1::after,
body.OB.theme.theme-assassinorum .deco-right-1::after,
body.OB.theme.theme-adeptus-ministorum .deco-right-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/7/79/Imperium-side_right.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: right 0px !important;
    -webkit-mask-image: linear-gradient(130deg, black, transparent 500px);
    mask: linear-gradient(130deg, black, transparent 500px);
    opacity: 0.5;
    filter: sepia(0.5) hue-rotate(150deg);
    transform: scale(-1, 1);
}

body.OB.theme.theme-Imperium .deco-top-left-alt>.image,
body.OB.theme.theme-Imperium .deco-top-right-alt>.image,
body.OB.theme.theme-assassinorum .deco-top-left-alt>.image,
body.OB.theme.theme-assassinorum .deco-top-right-alt>.image,
body.OB.theme.theme-Inquisition .deco-top-left-alt>.image,
body.OB.theme.theme-Inquisition .deco-top-right-alt>.image,
body.OB.theme.theme-adeptus-ministorum .deco-top-left-alt>.image,
body.OB.theme.theme-adeptus-ministorum .deco-top-right-alt>.image {
    filter: brightness(0.7) grayscale(0.4);
}

/** Background parchemin. **/
.bg-parchemin {
    background: url('/images/0/0f/Parchemin.jpg') !important;
}

.bg-parchemin-clair,
.bg-parchemin-light,
.bg-parchemin-lightened {
    background: url('/images/8/84/Parchemin-clair.jpg') !important;
}

/** gestion auto des marges des table flottantes **/
body.mediawiki .mw-parser-output>table.float-right {
    margin: 0 0 1em 1em;
    clear: right;
}

body.mediawiki .mw-parser-output>table.float-left {
    margin: 0 1em 1em 0;
    clear: left;
}

body.mediawiki .mw-parser-output>table.auto-center {
    margin-bottom: 1em;
    clear: both;
}

/** Grille s'ajustant à la taille de l'écran. **/
.responsive-grid {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.responsive-grid>* {
    flex: 1;
    padding: 1em;
    box-sizing: border-box;
}


/** scrollbar du site (sauf pour firefox) **/
body::-webkit-scrollbar {
    width: 20px;
}

body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #717978, #414444, #575b5b, #232625, #3c4240, #1f2322);
    border-radius: 3px;
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 5px black, inset 0 0 15px black;
}

body::-webkit-scrollbar-track {
    background: #151616;
    box-shadow: -1px 0 1px #1e1e1e;
}


/** police d'écriture spéciale**/

.text-standard {
    font-size: 1rem;
    font-family: Verdana, Geneva, sans-serife;
    font-weight: normal;
    font-size: 1rem;
    font-style: normal;
    text-transform: none;
    line-height: 1;
}

.text-gothic {
    font-family: 'Grenze Gotisch', cursive;
    font-weight: normal;
    font-size: 1.2rem;
    font-style: normal;
    text-transform: none;
    line-height: 1.2;
}

.text-gothic a {
    font-weight: normal !important;
}

.text-scifi {
    font-family: 'Iceland';
    font-size: 1.4em;
    letter-spacing: -0.5px;
}

/** Mise en évidence de la première lettre d'un texte en gothic et grande taille. **/
.first-letter-large:first-letter {
    font-family: 'Grenze Gotisch', cursive;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    line-height: 0.6;
    font-size: calc(1.375rem + 1.5vw) !important;
    float: left;
    margin-right: 0.1em;
}


/** Classes génériques **/

.w-300,
.w-xs {
    width: 300px !important;
    max-width: 100%;
}

.w-400,
.w-small {
    width: 400px !important;
    max-width: 100%;
}

.w-500 {
    width: 500px !important;
    max-width: 100%;
}

.w-600 {
    width: 600px !important;
    max-width: 100%;
}

.w-800,
.w-middle {
    width: 800px !important;
    max-width: 100%;
}

.w-1000,
.w-large {
    width: 1000px !important;
    max-width: 100%;
}

.w-1200,
.w-xl {
    width: 1200px !important;
    max-width: 100%;
}

.w-100p,
.w-100 {
    width: 100% !important;
}

.w-min-300 {
    min-width: min(100%, 300px) !important;
}

.w-min-400 {
    min-width: min(100%, 400px) !important;
}

.w-min-500 {
    min-width: min(100%, 500px) !important;
}

.w-min-600 {
    min-width: min(100%, 600px) !important;
}

.w-min-800 {
    min-width: min(100%, 800px) !important;
}

.w-min-1000 {
    min-width: min(100%, 1000px) !important;
}

.w-min-1200 {
    min-width: min(100%, 1200px) !important;
}

.w-100p,
.w-100 {
    width: 100% !important;
}

.auto-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.auto-center.auto-margin {
    margin-left: 0 auto 1em auto !important;
}

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

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

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

.text-italic {
    font-style: italic !important;
}

.text-bold {
    font-weight: bold !important;
}

.float-left {
    float: left !important;
}

.float-left.auto-margin {
    margin: 0 1em 1em 0 !important;
}

.float-right {
    float: right !important;
}

.float-right.auto-margin {
    margin: 0 0 1em 1em !important;
}

.clear-both {
    clear: both !important;
}

.clear-right {
    clear: right !important;
}

.clear-left {
    clear: left !important;
}

.OB-panel {
    background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black;
    box-shadow: inset 1px 1px #ffffff03, 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black !important;
    border-radius: 3px;
    padding: 0.2em;
}

/*** tables ***/

/** fix pour les fiche de char**/
table.fiche-char td:nth-child(2n+1) {
    white-space: nowrap;
}

/** Table custom standard **/
table.OB-data-table {
    background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black;
    box-shadow: inset 1px 1px #ffffff03, 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black !important;
    border-radius: 3px;
    border-collapse: separate;
    border-spacing: 0.5em 0.4em;
    padding: 0.2em;
}

table.OB-data-table>tr>th,
table.OB-data-table>*>tr>th {
    color: #bdbdbd;
}

table.OB-data-table>tr>td,
table.OB-data-table>*>tr>td {
    background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black !important;
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black;
    border-radius: 3px;
    margin: 0.2em;
    padding: 0.2em 1em;
}

/** Ancien stile 'wikitable' **/
table.simple {
    background-color: #f8f9fa;
    color: #222;
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
}

table.simple>tr>th,
table.simple>tr>td,
table.simple>*>tr>th,
table.simple>*>tr>td {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em;
}

body.OB .mw-parser-output>.wikitable {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

body.OB.theme table.wikitable:not(.simple) {
    color: #DBE9F4;
    max-width: 100%;
}

/** table - style Adepta Sororitas **/
body.OB.theme table.wikitable_sororitas {
    color: #DBE9F4;
    background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black !important;
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
    padding: 30px;
    border-radius: 5px;
    padding: 10px;
    border: none;
    border-collapse: unset;
    clear: both;
    border-spacing: 0;
}

body.OB.theme table.wikitable_sororitas>tr>th,
body.OB.theme table.wikitable_sororitas>tr>td,
body.OB.theme table.wikitable_sororitas>*>tr>th,
body.OB.theme table.wikitable_sororitas>*>tr>td {
    border: 2px solid #623939;
    padding: 10px 20px;
}

body.OB.theme.theme-jdr-imperium-maledictum table.wikitable {
    position: relative;
    background-image: url("/images/8/89/Imperium-maledictum-panel-bg.jpg") !important;
    background-repeat: repeat !important;
    box-shadow: inset 4px 4px #ffffff03, inset 0 0 0 4px #95a0a2, 0 4px 5px black, inset 0 0 10px black !important;
}

body.OB.theme.theme-jdr-imperium-maledictum table.wikitable:not(.citation)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 100%;
    background-image: url("/images/4/40/Imperium-maledictum-panel-corner-top.png"), url("/images/b/ba/Imperium-maledictum-panel-corner-bottom.png");
    background-position: left top, left bottom;
    background-repeat: no-repeat, no-repeat;
    pointer-events: none;
}

body.OB.theme.theme-jdr-imperium-maledictum table.wikitable:not(.citation)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: calc(100% + 1px);
    background-image: url("/images/4/40/Imperium-maledictum-panel-corner-top.png"), url("/images/b/ba/Imperium-maledictum-panel-corner-bottom.png");
    background-position: left top, left bottom;
    background-repeat: no-repeat, no-repeat;
    transform: scaleX(-1);
    pointer-events: none;
}

/** Modèles: **/

.parchemin-ob {
    background: linear-gradient(transparent 50%, black), linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black;
    box-shadow: inset 1px 1px #ffffff03, inset 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black, inset 0 -50px 50px black;
    display: flex;
    flex-flow: column;
    border-radius: 10px;
    text-align: left;
    position: relative;
    margin: 0 5px 20px 5px;
    overflow: hidden;
}

.parchemin-ob-title {
    text-align: center;
    border-radius: 10px 10px 0 0;
    margin: 1px;
    box-shadow: 0 4px 8px #000, inset 0 0 10px #000, inset 0 0 10px #000;
    background: #131414;
    min-height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Grenze Gotisch', cursive;
    font-weight: normal;
    font-size: 20px;
}

.parchemin-ob-title a {
    text-decoration: none;
    font-weight: normal;
    padding: 10px 0;
    display: block;
    border-radius: 10px 10px 0 0;
    color: white;
    flex: 1;
}

.parchemin-ob.titled .parchemin-ob-title a {
    color: white !important;
}

.parchemin-ob.titled .parchemin-ob-title a.external {
    background-position-x: calc(100% - 10px);
}

.parchemin-ob-title a:hover {
    color: white !important;
    text-shadow: 0 0 2px #000, 0 0 3px #30e2ff, 0 0 5px #30e2ff !important;
    box-shadow: inset 0 0 10px #000;
}

.parchemin-ob-page-bg {
    margin: 8px;
    border-radius: 5px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    height: calc(100% - 16px);
    width: calc(100% - 16px);
    z-index: 1;
    overflow: hidden;
}

.parchemin-ob.titled .parchemin-ob-page-bg {
    top: 40px;
    height: calc(100% - 56px);
}

.parchemin-ob-page-bg::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    box-shadow: inset 0 0 0 1px #8685829e, inset 0 0 15px white, 0 0 5px -2px black;
    border-radius: 5px;
}

.parchemin-ob-page-bg::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    box-shadow: inset 0 0 0 1px #868582, inset -3px 3px #c3b49d, 0 0 5px -2px black;
    border-radius: 5px;
}

.parchemin-ob-content {
    margin: 14px 14px 8px 14px;
    overflow: hidden;
    padding: 20px;
    border-radius: 5px;
    box-sizing: border-box;
    color: #382612;
    z-index: 2;
    right: 6px;
    width: calc(100% - 22px);
    position: relative;
    height: 100%;
    flex: 1;
}

.mw-body-content .parchemin-ob-content a,
.mw-body-content .parchemin-ob-content a.external {
    text-decoration: none !important;
    text-shadow: none;
    color: var(--default-link-color) !important;
}

.mw-body-content .parchemin-ob-content a:hover,
.mw-body-content .parchemin-ob-content a.external:hover {
    color: black !important;
}

.mw-body-content .parchemin-ob-content a[href].new:hover,
.mw-body-content .parchemin-ob-content a[href].new {
    text-decoration: none !important;
    text-shadow: none;
    color: var(--default-link-color) !important;
}

.parchemin-ob-content a[href].new {
    color: #cc2200;
    text-shadow: none;
}

.parchemin-ob-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#00000030 1px, transparent 2px, transparent 100%), linear-gradient(90deg, #00000030 1px, transparent 2px, transparent 100%);
    background-size: 100% 8px, 8px 100%;
    -webkit-mask: radial-gradient(transparent 60%, black);
    mask: radial-gradient(transparent 60%, black);
    opacity: 0.5;
    pointer-events: none;
}

.parchemin-ob-content::after {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    width: calc(100% - 12px);
    box-shadow: inset 0 0 0 1px #2d1515ba, inset 0 0 0 2px #731919;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 22px, 100% 100%, 0 100%);
    opacity: 0.5;
    pointer-events: none;
}

.parchemin-ob-content .parchemin-ob-corner {
    position: absolute;
    font-size: 0;
    color: transparent;
    top: 0;
    right: 0;
    width: 35px;
    height: 25px;
    z-index: 5;
    border-radius: 0 0 0 8px;
    clip-path: polygon(-20% -20%, 120% 120%, -20% 120%);
    box-shadow: inset 1px -1px 0 #938a7a, 0 0 5px, 0 0 5px #a7977a;
    transform: translateX(18px) rotate(32deg);
    transform-origin: left top;
    background: linear-gradient(45deg, #eadabf 30%, #37230d);
}

.parchemin-ob.inlight .parchemin-ob-content .parchemin-ob-corner {
    background: linear-gradient(45deg, #e4e0d5 30%, #544937);
}

body.OB .mw-parser-output>ul:last-of-type {
    box-shadow: 5px 5px 5px -5px #0000006e, inset 0 0 50px #000, 0 0 3px #443c3d, 0 0 3px black, inset 25px 0 50px #ffffff4d, inset 5px 5px 2px -5px #ffffffba;
    background: linear-gradient(rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 2px, rgba(128, 128, 128, 0.1) 2px, rgba(128, 128, 128, 0.1) 4px), radial-gradient(rgba(128, 186, 200, 0.4), rgba(20, 24, 28, 0.76)), linear-gradient(135deg, #000, #042417, #000, #000, #000, #02150e, #000, #000, #000, #042417, #000);
    background-size: auto 4px, 100% 100%;
    padding: 35px 30px 35px 60px;
    box-sizing: border-box !important;
    margin: 0 10px;
    display: flex;
    flex-flow: column;
}

body.OB .perspective-container {
    text-align: center;
    perspective: 1000px;
    background: linear-gradient(#000, #00000061 60%, #000c11 100%), radial-gradient(#334c46, transparent);
    position: relative;
    width: 200%;
    transform: translateX(-25%);
    -webkit-mask: linear-gradient(black calc(100% - 20px), transparent);
    mask-image: linear-gradient(black calc(100% - 20px), transparent);
}

body.OB .perspective-container.cards {
    text-align: center;
    perspective: 1000px;
    background: linear-gradient(#000, #00000061 60%, #000c11 100%), radial-gradient(#334c46, transparent);
    position: relative;
    width: calc(100% + 4em);
    transform: translateX(-2em);
    -webkit-mask: linear-gradient(black calc(100% - 20px), transparent);
    mask-image: linear-gradient(black calc(100% - 20px), transparent);
}

body.OB .perspective-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 1500px;
    background-image: linear-gradient(#0000006e, #181d1d3d 80%), linear-gradient(#75b9b96e 0px, transparent 4px, transparent calc(100% - 4px), #75b9b96e 100%), linear-gradient(90deg, #75b9b96e 0px, transparent 2px, transparent calc(100% - 2px), #75b9b96e 100%);
    background-repeat: repeat;
    background-size: auto, auto 80px, 80px auto;
    background-position: center center;
    transform: translateX(-25%) rotateX(88deg);
    transform-origin: center bottom;
    z-index: -1;
    -webkit-mask-image: linear-gradient(transparent, black, transparent);
    mask-image: linear-gradient(transparent, black, transparent);
}

body.OB .portrait-scifi-entry:not(:hover) .portrait-scifi-overlay-1 {
    box-shadow: inset 0 -30px 50px 0 transparent, inset 0 0 50px transparent, inset 0 -100px 50px -50px transparent, 5px 5px 5px -5px #0000006e, inset 0 0 50px #000, 0 0 3px #000, inset 25px 0 50px #ffffff5c, inset 5px 5px 2px -5px #ffffffba !important;
}

body.OB .portrait-scifi-entry:hover .portrait-scifi-overlay-1 {
    transition: 0s background ease-in-out !important;
}

body.OB .portrait-scifi-entry.frame>.portrait-scifi-overlay-1 {
    background: radial-gradient(transparent, transparent 70%, black), linear-gradient(90deg, black, transparent 10px, transparent calc(100% - 10px), black), linear-gradient(black, transparent 10px, transparent calc(100% - 10px), black);
}

body.OB .portrait-scifi-entry:hover .portrait-scifi-overlay-2 {
    background-position: 0 110%, 0 10% !important;
    transition: 0.7s all ease-in-out !important;
}

.portrait-scifi-avatar> :last-child {
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100%;
    height: 100%;
}

.portrait-scifi-avatar> :last-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    transition: 0.3s all ease-in-out;
}

.portrait-scifi-entry:hover .portrait-scifi-avatar> :last-child img {
    transform: scale(1.05);
}

body.OB .portrait-scifi-avatar>.image {
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

body.OB .portrait-scifi-avatar.top>.image {
    align-items: baseline;
}

body.OB .portrait-scifi-avatar.bottom>.image {
    align-items: end;
}

body.OB .portrait-scifi-entry:not(:hover)>.portrait-scifi-name {
    text-shadow: 0 0 3px transparent, 0 0 3px transparent, 0 0 3px transparent, 0 0 3px black, 0 0 5px transparent, 0 0 10px transparent !important;
}

body.OB .portrait-scifi-entry>.portrait-scifi-name {
    font-family: 'Iceland';
    font-size: 16px;
    letter-spacing: -0.5px;
}

body.OB .portrait-scifi-name::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    height: calc(100% - 20px);
    width: 100%;
    border-radius: 5px;
    padding: 6px 0;
    box-sizing: border-box;
    background: linear-gradient(135deg, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248) #131313 !important;
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
}

body.OB .portrait-scifi-logo {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px 0 10px 20px;
    width: 100%;
    text-align: center;
    opacity: 0.7;
    z-index: 20;
    pointer-events: none;
}

body.OB .portrait-scifi-logo img {
    background: radial-gradient(#000000ba, transparent 80%);
}

body.OB .portrait-scifi-entry>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    clip-path: polygon(0 0%, calc(100% - 20px) 0%, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
}

body.OB .perso-card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*** Carte Necron ***/
body.OB .perso-card.necron {
    box-sizing: border-box;
    padding: 0;
    margin: 2em;
    position: relative;
    display: table;
    text-align: center;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(135deg, #000, #042417, #000, #000, #000, #02150e, #000, #000, #000, #042417, #000), radial-gradient(#000 80%, #00f21a38) !important;
    box-shadow: inset 0 0 20px #000, inset 25px 0 50px #04a26e26, inset 5px 5px 2px -5px #ffffffba, 1px 1px 5px #000, 1px 1px 3px #000 !important;
}

body.OB .perso-card::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 49px);
    background: #f9f9f90d;
}

body.OB .perso-card.necron>.logo {
    position: absolute;
    z-index: 10;
    top: 0;
    background: none !important;
    right: 0;
    transform: translateY(-9px) translateX(19px);
    opacity: 0.9;
}

body.OB .perso-card.necron .perso-card-title {
    font-size: 16px;
    color: #cacaca !important;
    text-shadow: 0 0 5px #ffffff2e !important;
    padding: 0.5em;
    margin-bottom: 0.3em;
    overflow: clip;
    border-radius: 10px 5px 0 0;
    box-shadow: 0 10px 10px -10px #61ca8f, 0 20px 20px -15px #b4ffbc;
    position: relative;
    z-index: 20;
    height: 35px;
    box-sizing: border-box;
}

body.OB .perso-card.necron .perso-card-title::after {
    content: '';
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4bfbb124, #45d7a02e, #0c31278c, #0c31278c, #000000f0), linear-gradient(#00000029, black);
}

body.OB .perso-card.necron .bg-title {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 100%;
    overflow: clip;
}

body.OB .perso-card.necron .bg-title:last-child {
    transform: translateX(-50%) translateY(-9px);
    display: block;
    z-index: 1;
}

body.OB .perso-card.necron .perso-card-title .label {
    font-size: 16px;
    color: #ffffff78 !important;
    text-shadow: 0 0 5px #ffffff2e !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-40%);
    z-index: 50;
}

body.OB .perso-card.necron .perso-card-description {
    box-sizing: border-box;
    padding: 0.5em 0.5em 1em 0.5em;
    position: relative;
    width: 220px;
    flex: 1;
    text-shadow: 0 0 40px #50ff00, 0 0 80px #50ff00, 0 0 25px #fff !important;
    color: #fafff85e;
}

body.OB .perso-card.necron .perso-card-description a {
    color: black !important;
}

body.OB .perso-card.necron .perso-card .portrait-scifi-entry {
    scale: 0.95;
}

body.OB .perso-card.necron .perso-card .portrait-scifi-entry:hover {
    scale: 1;
}

body.OB .perso-card.necron .perso-card:hover .perso-card-description,
body.OB .perso-card.necron .perso-card:hover .perso-card-description a {
    color: #ffffffb0 !important;
}

body.OB .perso-card.necron .perso-card .status {
    color: #a8a19a;
}

body.OB .custom-table-header {
    display: flex;
    justify-content: space-between;
    padding: 0.5em 1.5em;
    color: #cacaca;
    font-style: italic;
}

body.OB .custom-table-header>div {
    flex: 1;
}

body.OB .custom-table {
    background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) !important;
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
    padding: 0.5em;
}

body.OB .custom-table>div {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) !important;
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
    padding: 0.5em;
    margin: 0.5em;
}

body.OB .custom-table>div>div {
    flex: 1;
}

body.OB .custom-table>div>div:last-child {
    min-width: 280px;
    white-space: nowrap;
}

body.OB .responsive-flex {
    display: flex;
    flex-direction: row;
    max-width: 100%;
}

body.OB .responsive-flex>* {
    flex: 1;
}

body.OB .responsive-flex.spacing>* {
    padding: 0 1em;
}


body.OB .sheet-wrapper {
    position: relative;
    clear: both;
}


body.OB.theme #mw-content-text h3 {
    border-bottom: 1px solid #757575;
    margin-bottom: 1em;
}

body.OB .sheet-wrapper h2,
body.OB .sheet-wrapper h3,
body.OB .sheet-wrapper h4,
body.OB .sheet-wrapper h5 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(89px);
    margin: 16px 0;
    padding-left: 6em;
    width: calc(100% - 127px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-direction: row;
    white-space: nowrap;
    background: linear-gradient(#121313 60%, #0000), linear-gradient(135deg, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248) !important;
    box-shadow: 0 4px 4px -4px black !important;
    border-bottom: 1px solid black;
}

body.OB .sheet-wrapper h2> :first-child,
body.OB .sheet-wrapper h3> :first-child,
body.OB .sheet-wrapper h4> :first-child,
body.OB .sheet-wrapper h5> :first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

body.OB .sheet-wrapper h2> :last-child,
body.OB .sheet-wrapper h3> :last-child,
body.OB .sheet-wrapper h4> :last-child,
body.OB .sheet-wrapper h5> :last-child {
    flex: 1;
    display: block;
}

body.OB .sheet-content {
    min-height: 220px;
    display: flex;
}

body.OB .sheet-image {
    min-width: 89px;
}

body.OB .sheet-desc {
    position: relative;
    margin-top: 45px;
    padding: 1em 3em 1em 84px;
    clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px));
    box-sizing: border-box;
    text-shadow: 0 0 5px black, 0 0 15px black;
    display: block;
    transition: 0s all ease-in-out;
    background: radial-gradient(circle at 0 0, #000, #0000 200px), radial-gradient(at center 0, #2f2f2f, #0000 75%) #111;
}

body.OB .sheet-desc::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150%;
    height: 250%;
    border-radius: 50%;
    background: radial-gradient(#00000085, #00000087, #35353573, transparent 50%);
    transform: translateX(-50%) translateY(50%);
    pointer-events: none;
    z-index: -1;
}

body.OB .sheet-desc::after {
    content: '';
    top: 0;
    right: 0;
    width: 250%;
    height: 100%;
    transform: translateX(50%) translateY(-50%);
    pointer-events: none;
    background: radial-gradient(#acacac21, transparent 50%);
    position: absolute;
    z-index: -1;
}


.carriere-pane-content {
    background: linear-gradient(135deg, #71797848, #41444448, #575b5b48, #23262548, #3c424048, #1f232248) !important;
    margin: 1.5em;
    position: relative;
    overflow: clip;
    box-sizing: border-box;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    width: 200px;
}

.carriere-pane-content.imperium {
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 -30px 5px -5px #ffffff70, inset 0 -32px 0 #9f000061 !important;
}

.carriere-pane-content.ork {
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 -30px 5px -5px #ffffff70, inset 0 -32px 0 #283c24 !important;
}

.carriere-pane-content.aeldari {
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 -30px 5px -5px #ffffff70, inset 0 -32px 0 #093a4d !important;
}

.carriere-pane-content.other {
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black, inset 0 -30px 5px -5px #ffffff70, inset 0 -32px 0 #37373761 !important;
}

.carriere-pane-image {
    display: inline-block;
    border-radius: 5px;
    box-shadow: inset 0 0 1px #ffffff38, inset 0 0 5px #000, inset 0 0 15px #000;
    padding: 10px;
    margin: 12px;
    min-height: 256px;
    box-sizing: border-box;
}

.carriere-pane-image .image {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.carriere-pane-image img {
    width: auto;
    height: auto;
    margin: auto;
}

.carriere-pane-image fit-vertical img {
    min-height: 236px !important;
}

.carriere-pane-image fit-horizontal img {
    min-height: 156px !important;
}

.carriere-pane-title {
    text-align: center;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    transform: translateY(-5px);
    color: #e3e3e3;
    text-shadow: 0 0 5px black;
    min-width: 140px;
    box-shadow: inset 0 0 1px #ffffff38, inset 0 0 5px #000, inset 0 0 15px #000;
    padding: 0.5em;
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carriere-pane-label {
    padding: 2px 0;
    width: 100%;
    margin-top: 4px;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    background: #191b1b;
    color: #6f6f6f;
    box-shadow: inset 1px 1px 0 #ffffff1a, inset -1px 2px 0 #0000003d;
    height: 23px;
    box-sizing: border-box;
    background: #1c0404 !important;
}

.carriere-pane-infos {
    position: absolute;
    top: 0;
    left: 15px;
    width: calc(100% - 30px);
    pointer-events: none;
}

.carriere-pane-infos-handler {
    display: flex;
    justify-content: center;
    background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #1c1c1c;
    box-shadow: inset 0 1px 0 #ffffff17, inset 0 -1px 0px #000000ad, 0 2px 10px black;
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, calc(100% - 9px) 200%, 9px 200%, 9px 100%);
    height: 22px;
    font-weight: bold;
    pointer-events: all;
    z-index: 1;
    position: relative;
}

.imperium .carriere-pane-infos-handler {
    background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #1c0404;
}

.aeldari .carriere-pane-infos-handler {
    background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #04041c;
}

.ork .carriere-pane-infos-handler {
    background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #041c04;
}

.other .carriere-pane-infos-handler {
    background: linear-gradient(69deg, #414141 9px, transparent 10px), linear-gradient(-69deg, #3e3a3a 9px, transparent 10px) #1c1c1c;
}

.carriere-pane-image:hover~.carriere-pane-infos *,
.carriere-pane-infos:hover * {
    opacity: 1;
    pointer-events: all;
}

.carriere-pane-infos-data {
    margin: auto;
    width: 160px;
    height: 244px;
    background: radial-gradient(#454545, #1c0404);
    padding: 0.5em;
    box-sizing: border-box;
    pointer-events: none;
    text-align: left;
    opacity: 0;
    font-style: italic;
    position: relative;
    transform: translateY(-7px);
    border-radius: 5px;
}

.carriere-pane-infos-data a {
    font-style: normal;
    font-weight: normal;
}

.imperium .carriere-pane-infos-data {
    background: radial-gradient(#452e2e, #1c0404);
}

.ork .carriere-pane-infos-data {
    background: radial-gradient(#2e452e, #041c04);
}

.aeldari .carriere-pane-infos-data {
    background: radial-gradient(#2e2e45, #04041c);
}

.other .carriere-pane-infos-data {
    background: radial-gradient(#454545, #1c1c1c);
}


.split-image {
    position: relative;
    margin: 2rem auto;
    display: flex;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.split-image>* {
    display: flex;
}

.split-image .left-pane {
    width: 25%;
    transform: scale(0.8);
    transform-origin: right;
}

.split-image .center-pane {
    width: 50%;
}

.split-image .right-pane {
    width: 25%;
    transform: translateX(-30%) scale(0.8);
    transform-origin: left;
}

.split-image .left-pane> :nth-child(1) {
    width: 20%;
}

.split-image .left-pane> :nth-child(2) {
    width: 80%;
}

.split-image .center-pane> :nth-child(1) {
    width: 10%;
}

.split-image .center-pane> :nth-child(2) {
    width: 90%;
}

.split-image .right-pane> :nth-child(1) {
    width: 20%;
}

.split-image .right-pane> :nth-child(2) {
    width: 80%;
}

.split-image .left-pane> :nth-child(1) img {
    transform: translateX(0);
}

.split-image .left-pane> :nth-child(2) img {
    transform: translateX(-5%);
}

.split-image .center-pane> :nth-child(1) img {
    transform: translateX(-25%);
}

.split-image .center-pane> :nth-child(2) img {
    transform: translateX(-30%);
}

.split-image .right-pane> :nth-child(1) img {
    transform: translateX(-75%);
}

.split-image .right-pane> :nth-child(2) img {
    transform: translateX(-80%);
}


.split-image>*> :nth-child(2n+1) {
    perspective: 1000px;
    perspective-origin: right center;
}

.split-image>*> :nth-child(2n+1)>* {
    transform: rotateY(-60deg);
    transform-origin: right center;
    height: 100%;
    width: 100%;
    background: white;
    position: relative;
}

.split-image>*> :nth-child(2n+1)> ::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 10px black, inset 0 0 40px black;
    z-index: 10;
}

.split-image>*> :nth-child(2n) {
    perspective: 1000px;
    perspective-origin: left center;
}

.split-image>*> :nth-child(2n)>* {
    transform: rotateY(30deg);
    transform-origin: left center;
    height: 100%;
    width: 100%;
    background: black;
    box-shadow: 0 40px 40px -30px #ffffff30;
}

.split-image>*>* {
    height: 100%;
    width: 100%;
}

.split-image>*>*>* {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.split-image *,
.split-image ::before {
    transition: 1s all ease-in-out;
}

.split-image:hover * {
    transform: none;
    box-shadow: none !important;
}

.split-image:hover ::before {
    box-shadow: inset 0 0 10px transparent, inset 0 0 40px transparent !important;
}

/** Pour le mécanisme de sélection **/
[data-trigger] {
    cursor: pointer;
    user-select: none;
}

:not(.p-navbar)>[data-target]:not(.active) {
    display: none;
}

/** Effets d'animation: **/

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

@keyframes shine-alt {
    to {
        background-position: -200% center;
    }
}

@media screen and (max-device-width: 900px) {
    #content a.image {
        animation-play-state: paused !important;
    }
}

/** Website navigator **/
.wiki-top-banner-wiki-toggler::after {
    content: "\2b";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateX(100%) translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 24px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000;
    background: #585858;
    background: #000;
}

.wiki-top-banner-wiki-toggler {
    position: absolute;
    top: 0;
    right: 7px;
    width: 200px;
    height: 100%;
    background: url("/images/8/8c/40k-Logo-mini.png");
    background-position: center center;
    background-repeat: no-repeat;
    margin-right: 40px;
}

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

    .float-left,
    .float-left.auto-margin,
    .float-right,
    .float-right.auto-margin {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }
}

/** fix display news on Home page**/
.news-author {
    font-size: 0;
    font-style: normal;
}

.news-author a {
    font-size: small;
    font-style: normal;
}

.news-author::before {
    content: '\f56b';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: small;
    margin-right: 0.375rem;
    font-style: normal;
}

.news-author,
.news-author::before,
.news-author>*,
.news-author>a,
.news-author>a:visited {
    user-select: none;
    pointer-events: none;
    color: #64615d !important;
}

/** Fix btn link **/
.btn.btn-link {
    box-shadow: none !important;
}
/** custom button **/
.btn.btn-ob {
	color: white;
	margin-top: 0.5em;
	background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) #032525;
	padding: 0.5em;
}
.btn.btn-ob:hover {
	background-color: #0e8080 !important;
}

/** Bootstrap popover style (liens popup) **/
body {
    --popover-border-color: #1e2222;
}

.custom-template-title,
.custom-template-content {
    display: none;
}

[data-popover-link],
.popover-link {
    line-height: 1 !important;
    vertical-align: baseline;
    padding: 0 !important;
    display: inline-flex;
    align-items: baseline;
    color: #5077b9;
    user-select: all;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[data-popover-link]::after,
.popover-link::after {
    content: '\f059';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--popover-border-color);
    margin-left: 3px;
    font-size: small;
    transition: color 0.15s ease-in-out;
    text-shadow: 0 0 1px #000000, 0 0 1px #000000;
}

.popover-link[aria-describedby] {
    user-select: none;
    color: white !important;
}
.popover-link[aria-describedby]::after,
.popover-link:hover::after {
    color: var(--default-link-color);
}

.popover {
    border: 1px solid var(--popover-border-color);
    border-radius: 0.5rem;
    max-width: min(80vw, 400px) !important;
}

.popover-header {
    position: relative;
    background: radial-gradient(#031516, black 90%) !important;
    border-radius: 0.375rem 0.375rem 0 0;
    font-weight: normal;
    border-bottom-color: var(--popover-border-color);
    padding: 0.5rem 50px 0.5rem 40px;
    text-align: center !important;
    font-family: "Grenze Gotisch", cursive;
    font-size: 20px;
}

.popover-header img {
    position: absolute;
    top: 12px;
    left: 20px;
    filter: brightness(0.2);
}

.popover-body {
    background: black;
    border-radius: 0 0 0.375rem 0.375rem;
    padding: 1rem 1.75rem 1rem 1.5rem !important;
}

.popover-thumb-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate3d(50%, -30%, 0);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid var(--popover-border-color);
    border-radius: 50%;
    transition: ease-in-out 0.5s all;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.popover-thumb {
    position: absolute;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    transition: ease-in-out 0.5s all;
}

.popover-body a:hover .popover-thumb-wrapper {
    right: 0;
    top: 0;
    width: 200px;
    height: 200px;
    border-radius: 1rem;
}

.popover-body a:hover .popover-thumb {
    width: 200px;
    height: 200px;
    border-radius: 1rem;
}
.popover-tags {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.popover-tags > * {
	border: 1px solid #2c2c2c;
	border-radius: 10px;
	padding: 0 8px;
	font-size: small;
}
.popover-tags > a {
	border: 1px solid #2c2c2c;
	color: var(--default-link-color);
}
.popover-tags > a:hover {
	border: 1px solid white !important;	
	color: white;
}

.bs-popover-right>.arrow::after,
.bs-popover-auto[x-placement^="right"]>.arrow::after {
    border-right-color: var(--popover-border-color);
}

.bs-popover-left>.arrow::after,
.bs-popover-auto[x-placement^="left"]>.arrow::after {
    border-left-color: var(--popover-border-color);
}

.bs-popover-top>.arrow::after,
.bs-popover-auto[x-placement^="top"]>.arrow::after {
    border-top-color: var(--popover-border-color);
}

.bs-popover-bottom>.arrow::after,
.bs-popover-auto[x-placement^="bottom"]>.arrow::after {
    border-bottom-color: var(--popover-border-color);
}

/** style de preview de wikicode pour les exemples dans les pages de modèles**/
pre {
    background: #020a0c !important;
    color: #007575 !important;
    border-radius: 0.5rem;
    border-color: #1f2223 !important;
    max-height: 50vh;
}

/** style du rendu des pages JSON **/
table.mw-json {
    border-collapse: collapse;
    border-spacing: 0;
    font-style: normal;
}

table.mw-json th {
    background-color: #fff;
    font-weight: normal;
    vertical-align: top;
    background: radial-gradient(#031516, black 70%) !important;
    color: white;
}

table.mw-json td {
    background: #949b9c;
    color: black;
    overflow: hidden;
}

/** Menu contextuel **/
body.OB.theme #pinned-page-menu {
    position: fixed;
    top: 90px;
    left: 0;
    box-sizing: border-box;
    min-width: 200px;
    max-width: 200px;
    height: calc(100vh - 90px);
    background: linear-gradient(135deg, #71797838 0, #41444438 25%, #575b5b38 40%, #23262538 55%, #3c424038 75%, #1f232238 85%) #000 !important;
    box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
    z-index: 10000;
    user-select: none;
    overflow: auto;
    white-space: nowrap;
    transition: 0.3s all ease-in-out;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* Hide menu scrollbar (Chrome, Safari and Opera) */
body.OB.theme #pinned-page-menu::-webkit-scrollbar {
    display: none;
}
body.OB.theme #pinned-page-menu .toctogglespan {
    display: none;
}
body.OB.theme #pinned-page-menu > .toctitle {
    border-bottom: 1px solid #414141;
    background: radial-gradient(black,transparent 70%),linear-gradient(135deg,#717978,#414444,#575b5b,#232625,#3c4240,#1f2322,#717978,#414444,#575b5b,#232625,#3c4240,#1f2322) !important;
    box-shadow: inset 1px 1px #ffffff1f,inset 0 0 0 1px #272727,0 4px 10px black,inset 0 0 50px black !important;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    padding-top: 30px;
    border-radius: 0 0 5px;
}

#context-menu-ob {
    display: absolute;
    top: 0;
    left: 0;
    max-width: min(80vw, 400px);
    width: 400px;
    display: none;
}

/** Fix full-screen mode **/
body.OB.theme.mode-fullscreen div#content {
    overflow-x: hidden !important;
    align-content: normal;
    background: black !important;
}


/** Affichage simplifié de la liste des modifications **/

table.mw-changeslist-line {
	margin: 5px 0;
	position: relative;
}
table.mw-changeslist-line:nth-child(2n) {
	background: #80808012;
	border-radius: 3px;
}
span.history-user .mw-usertoollinks {
	display: none;
}
span.mw-changeslist-line-inner-userLink {
	float: right;
}
td.mw-changeslist-line-inner > span.changedby {
	float: right;
}
a.mw-userlink::before {
	content: "\f007";
	margin-right: 5px;
}
span.mw-changeslist-links {
	display: inline-block;
	margin-right: 5px;
}
td:not(:hover) span.mw-changeslist-links {
	display: none;
}
span.comment.comment--without-parentheses {
	font-style: normal;
	color: gray;
}
span.comment.comment--without-parentheses::before {
	content: '\f10d' !important;
}
span.comment.comment--without-parentheses::after {
	content: '\f10e' !important;
	margin-left: 5px;
}

span.mw-changeslist-line-inner-separatorAfterLinks,
span.mw-changeslist-line-inner-historyLink,
span.mw-changeslist-line-inner-separatorAftercharacterDiff,
span.mw-changeslist-separator {
	display: none;
}
abbr.minoredit {
	font-size: 0;
	text-decoration: unset;
}
abbr.minoredit::before {
	color: #525252;
}
abbr.unpatrolled {
	font-size: 0;
	text-decoration: unset;
}
abbr.unpatrolled::before {
	content: '\f071';
	color: red !important;
}
table.mw-changeslist-line td.mw-enhanced-rc {
    min-width: 115px;
    text-align: right;
    margin-right: 10px;
    padding: 0 !important;
}
abbr.newpage {
	font-size: 0;
}
abbr.newpage::before {
	content: '\f067';
	color: green !important;
}
span.mw-changeslist-line-inner-comment {
	display: block;
	float: right;
	margin-right: 15px;
}
span.mw-changeslist-line-inner-comment .comment {
	font-style: normal;
	display: inline-block;
	color: gray;
	font-size: smaller;
}
span.mw-changeslist-line-inner-comment .comment::before {
	content: '\f10d';
}
span.mw-changeslist-line-inner-comment .comment::after {
	content: '';
}
span.mw-changeslist-line-inner-articleLink .mw-title,
td.mw-changeslist-line-inner .mw-title {
	font-size: large;
	font-weight: normal;
	margin-right: 5px;
}
span.mw-changeslist-line-inner-articleLink .mw-title > a,
td.mw-changeslist-line-inner .mw-title > a {
	font-size: large;
	font-weight: normal;
}
span.mw-changeslist-line-inner-articleLink .mw-title > a::before,
td.mw-changeslist-line-inner .mw-title > a::before {
	content: '\f70e';
}

span.mw-changeslist-line-inner-rollback {
	display: none !important;
}

td:hover span.mw-changeslist-line-inner-rollback {
	display: inline-block !important;
}
a.mw-userlink::before,
abbr.minoredit::before,
abbr.unpatrolled::before,
abbr.newpage::before,
span.comment.comment--without-parentheses::before,
span.comment.comment--without-parentheses::after,
span.mw-changeslist-line-inner-comment .comment::before,
span.mw-changeslist-line-inner-articleLink .mw-title > a::before,
td.mw-changeslist-line-inner .mw-title > a::before,
span.mw-changeslist-line-inner-characterDiff::before {
	font-size: 12px;
	font-style: normal;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: gray;
	margin-right: 5px;
}

.mw-changeslist-legend.mw-collapsible.mw-made-collapsible {
	box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black !important;
	background: radial-gradient(#093435, black) !important;
	border: none;
	border-radius: 5px;
	padding: 15px;
}
abbr.newpage {
	text-decoration: none !important;
}
span.mw-changeslist-line-inner-logEntry a.mw-userlink::after,
td.mw-changeslist-line-inner > span.changedby a.mw-userlink::after,
span.mw-changeslist-line-inner-userLink a.mw-userlink::after {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	position: absolute;
	top: 1px;
	left: 0;
	transform: translateX(calc(-100% - 10px));
	background: #092441;
	background-size: 100% 100%;
	overflow: hidden;
	font-size: 15px;
	font-style: normal;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f007";
	display: flex;
	align-items: center;
	justify-content: center;
	color: black;
}
span.mw-changeslist-line-inner-logEntry a.mw-userlink[title="Utilisateur:Trazyn l'infini"]::after,
td.mw-changeslist-line-inner > span.changedby a.mw-userlink[title="Utilisateur:Trazyn l'infini"]::after,
span.mw-changeslist-line-inner-userLink a.mw-userlink[title="Utilisateur:Trazyn l'infini"]::after {
	content: '';
	background-image: url('/images/f/f1/User-Trazyn.jpg');
}
span.mw-changeslist-line-inner-logEntry a.mw-userlink[title="Utilisateur:Blacklisted Jack"]::after,
td.mw-changeslist-line-inner > span.changedby a.mw-userlink[title="Utilisateur:Blacklisted Jack"]::after,
span.mw-changeslist-line-inner-userLink a.mw-userlink[title="Utilisateur:Blacklisted Jack"]::after {
	content: '';
	background-image: url('/images/a/af/User-BJack.jpg');
}
span.mw-changeslist-line-inner-logEntry a.mw-userlink[title="Utilisateur:Trazyn Guilhem"]::after,
td.mw-changeslist-line-inner > span.changedby a.mw-userlink[title="Utilisateur:Guilhem"]::after,
span.mw-changeslist-line-inner-userLink a.mw-userlink[title="Utilisateur:Guilhem"]::after {
	content: '';
	background-image: url('/images/d/dd/User-Guilhem.jpg');
}
span.mw-changeslist-line-inner-logEntry a.mw-userlink[title="Utilisateur:Trazyn Christer"]::after,
td.mw-changeslist-line-inner > span.changedby a.mw-userlink[title="Utilisateur:Christer"]::after,
span.mw-changeslist-line-inner-userLink a.mw-userlink[title="Utilisateur:Christer"]::after {
	content: '';
	background-image: url('/images/a/ae/User-Christer.jpg');
}

/** fix look page category panel **/
div#catlinks {
    box-sizing: border-box;
    justify-content: center;
    background: black;
    border: none;
    padding: 10px 20px;
    border-radius: 0.5rem;
    border: 1px solid #151515;
}
div#catlinks li a {
    border: 1px solid;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    box-shadow: none;
}
div#catlinks li {
    border: none !important;
}

/** Links toast & modal. **/
#linksModal, #linksModal .modal-title {
	color: black;
}
.btn.btn-mini .expandable {
	display: none;
}
.btn.btn-mini:hover .expandable {
	display: inline;
}
.btn.btn-links {
	color: #fff;
	background-color: #5077b9;
	border-color: #5077b9;
}
.btn.btn-links:hover {
	color: #fff;
	background-color: #5077b9;
	border-color: #5077b9;
}
#linksModal .modal-body > :nth-child(2n+1) {
	background: #c1c6cf;
}
#linksModal .modal-body > * {
	padding: 2px 10px;
}
.toast{
    opacity: 1;
    z-index: 1000;
    position: fixed;
    top: calc(100vh - 40px);
    right: 40px;
    transform: translateY(-100%);
    width: 300px;
    background: #000000ed;
    border: 1px solid rgb(30 34 34);
}
.toast-header {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    color: #ffffff;
    background-color: rgba(255,255,255,0.85);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
    background: radial-gradient(#093435c2, #000000c7) !important;
}
.toast-header .close {
    text-shadow: none;
    color: #303535;
}
.toast-body {
    color: lightgrey;
}
.toast-body a {
    color: #009b9c !important;
    display: block !important;
}
.toast-body a:hover {
    color: white !important;
}
.link-match {
    padding-top: 20px !important;
    display: flex;
	position: relative;
}
.link-match-id {
	position: absolute;
	top: 0;
	color: teal;
}
.match-data {
    width: 100%;
}
.match-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0;
}
.match-item > * {
	margin-top: 0;
	margin-bottom: 0;
}
.match-item input.form-check-input {
    position: relative;
}
.match-item > .source-item {
    flex: 1;
    font-family: monospace;
    font-size: small;
    color: #334;
    white-space: nowrap;
    min-width: 150px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.match-item > i {
    color: #609696;
}
.match-item > .transform-item {
	flex: 1;
    font-family: monospace;
    font-size: small;
    color: #334;
    white-space: nowrap;
	text-align: right;
}
.match-item:not(.checked) {
	justify-content: flex-start;
}
.match-item:not(.checked) > i, 
.match-item:not(.checked) > .transform-item {
    display: none;
}

/** fix page menu bar **/
.top-menu-item.w40k-univers > .top-menu-title {
    user-select: none;
    pointer-events: none;
}

/** Theme Dark angels **/
.theme-wing::before {
    content: '';
    background: url('https://omnis-bibliotheca.com/images/1/17/DA-wing.png');
    width: 43px;
    height: 63px;
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-35px);
}
.theme-wing {
    position: relative;
    margin-left: 40px;
}

@media screen and (max-width: 767px) {
    .hide-next-sm + * {
        display: none !important;
    }
}

/** Notif OB **/
div#mw-notification-area {
    position: fixed;
    top: 50%;
    left: 50%;
    right: unset;
    border: unset;
    transform: translate(-50%, -50%);
	background: linear-gradient(transparent 50%, black), linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) black;
    box-shadow: inset 1px 1px #ffffff03, inset 0 0 0 1px #272727, 0 4px 3px black, inset 0 0 10px black, inset 0 -50px 50px black;
	border-radius: 10px;
}
#pending-review::first-letter {
	text-transform: capitalize;
}
div#postedit-modqueued::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 90px;
    width: 90px;
    background: url(/images/6/66/OB-modif-sent.png) !important;
    background-size: 100% 100% !important;
	transform: translate(-5px, -5px);
}
#pending-review {
    border: none;
    text-align: center;
    width: 100%;
    font-weight: normal;
    text-transform: lowercase;
    color: #8a4949;
    font-family: "Grenze Gotisch",cursive;
    font-size: 24px;
    margin: 10px;
    z-index: 1;
}
.mw-notification {
    background: url(/images/thumb/0/0f/Parchemin.jpg/323px-Parchemin.jpg) !important;
    padding: 15px 40px;
}
.mw-notification::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	background: url('/images/c/c0/Purity-seals.png'), radial-gradient(#000000de, transparent 70%);
	height: 74px;
	width: 37px;
	transform: translatey(50%);
	z-index: 10;
}
.mw-notification::after {
	content: '';
	position: absolute;
	top: 7px;
	left: 7px;
	bottom: 7px;
	right: 7px;
	border: 2px solid #2e000069;
}
div#postedit-modqueued {
	color: #303040 !important;
    text-align: center;
}
.mw-message-box-warning {
    background-color: #fef6e7;
    border-color: #fc3;
    z-index: 1000000;
    position: relative;
}

.mw-notification-visible .oo-ui-labelElement-label {
	color: #303040 !important;
}

/** Lien menu modération **/
.n-Relecture::before {
    content: "\f0ae" !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 1rem !important;
    width: 1.25em;
    height: 16px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    font-style: normal;
}

.content_padding {
    padding: 2em 4em !important;
}
@media screen and (max-width: 1023px) {
    .content_padding {
        padding: 0.5em 1em !important;
    }
}
@media screen and (max-width: 767px) {
    .floatleft {
        float: none !important;
        text-align: center;
    }
    .floatright {
        float: none !important;
        text-align: center;
    }
}