/*
    STYLES
*/


:root, .theme-light {
    --theme-text: #161616;
    --theme-text-subtle: #505050;
    --theme-text-invert: #fff;
    --theme-text-glow-high-contrast: #171717;
    --theme-box-shadow-light: #0000001c;
    --theme-box-shadow-medium: #00000021;
    --theme-box-shadow-heavy: #0000002e;
    --theme-box-shadow-extra-heavy: #00000038;
    --theme-overlay: #000000b3;
    --theme-overlay-invert: #fff;
    --theme-body-background: #fff;
    --theme-body-background-accent: #e8e6df;
    --theme-body-background-medium: #f2f2f2;
    --theme-alternate-background: #171717;
    --theme-alternate-background-medium: #2f2f2f;
    --theme-card-background: #fff;
    --theme-border: #e6e6e6;
    --theme-border-accent: #e8e6df;
    --theme-border-white-high-contrast: #fff0;
    --theme-border-yellow-high-contrast: #0000;
    --theme-table-header: #e6e6e6;
    --theme-table-row: #f2f2f2;
    --theme-table-row-header: #fafafa;
    --theme-table-border-dark: #d2d2d2;
    --theme-hover-base: #2f2f2f;
    --theme-hover-invert: #fafafa;
    --theme-code-header: #e6e6e6;
    --theme-code-block: #f2f2f2;
    --theme-control-border: #757575;
    --theme-inline-code: #e6e6e6;
    --theme-code-highlight-background: #fff4ce;
    --theme-visited: #624991;
    --theme-score-low-off: #a800004d;
    --theme-score-low: #b62626;
    --theme-score-medium-off: #ffbb004d;
    --theme-score-medium: #ffb900;
    --theme-score-high-off: #489d484d;
    --theme-score-high: #2a8b2a;
    --theme-hyperlink: #0065b3;
    --theme-primary-base: #0078d4;
    --theme-primary-background: #d7eaf8;
    --theme-primary-background-glow-high-contrast: #d7eaf8;
    --theme-primary-dark: #004173;
    --theme-primary-hover: #0065b3;
    --theme-primary-active: #00579a;
    --theme-primary-box-shadow: #0065b34d;
    --theme-primary-invert: #fff;
    --theme-secondary-base: #a2a2a2;
    --theme-secondary-background: #e6e6e6;
    --theme-secondary-background-glow-high-contrast: #e6e6e6;
    --theme-secondary-dark: #2f2f2f;
    --theme-secondary-hover: #d2d2d2;
    --theme-secondary-active: #d2d2d2;
    --theme-secondary-box-shadow: #0000004d;
    --theme-secondary-invert: #000;
    --theme-tertiary-base: #243a5e;
    --theme-tertiary-background: #061329;
    --theme-tertiary-background-glow-high-contrast: #061329;
    --theme-tertiary-dark: #a4b2c9;
    --theme-tertiary-hover: #14294c;
    --theme-tertiary-active: #70819f;
    --theme-tertiary-box-shadow: #26173f4d;
    --theme-tertiary-invert: #fff;
    --theme-success-base: #107c10;
    --theme-success-background: #dff6dd;
    --theme-success-background-glow-high-contrast: #dff6dd;
    --theme-success-dark: #054b16;
    --theme-success-hover: #0b6413;
    --theme-success-active: #054b16;
    --theme-success-box-shadow: #489d484d;
    --theme-success-invert: #fff;
    --theme-info-base: #8661c5;
    --theme-info-background: #efd9fd;
    --theme-info-background-glow-high-contrast: #efd9fd;
    --theme-info-dark: #3b2e58;
    --theme-info-hover: #8661c5;
    --theme-info-active: #624991;
    --theme-info-box-shadow: #2018434d;
    --theme-info-invert: #fff;
    --theme-warning-base: #ffb900;
    --theme-warning-background: #fff4ce;
    --theme-warning-background-glow-high-contrast: #fff4ce;
    --theme-warning-dark: #6a4b16;
    --theme-warning-hover: #d19501;
    --theme-warning-active: #966802;
    --theme-warning-box-shadow: #ffbb004d;
    --theme-warning-invert: #000;
    --theme-danger-base: #a80000;
    --theme-danger-background: #fde7e9;
    --theme-danger-background-glow-high-contrast: #fde7e9;
    --theme-danger-dark: #470001;
    --theme-danger-hover: #870000;
    --theme-danger-active: #630001;
    --theme-danger-box-shadow: #a800004d;
    --theme-danger-invert: #fff;
    --theme-facepile-red: #a80000;
    --theme-facepile-teal: #328e9f;
    --theme-facepile-blue: #0078d4;
    --theme-gradient-text-purple: #702573;
    --theme-gradient-text-blue: #00579a;
    --theme-gradient-vivid-start: #b84dc6;
    --theme-gradient-vivid-end: #0078d4;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1600px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1600px;
    }
}

@media (min-width: 1084px) {
    .container {
        padding-right: 5%;
        padding-left: 5%;
        width: 90%;
        box-sizing: content-box;
    }
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: .75rem;
    padding-left: .75rem;
}


/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
    border-radius: 0;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}



/* Menu */

/*quand c'est etendu....*/
@media (min-width: 992px) {

    .dropdown-menu[data-bs-popper] {
        top: 100%;
        right: 0;
        left: unset;
        margin-top: 0.125rem;
    }

    .dropdown-menu {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        width: 650px !important;
    }

        .dropdown-menu .MenuBlock {
            justify-content: center !important;
        }
}

.dropdown-menu .MenuBlock {
    justify-content: left;
}

.dropdown-menu {
    width: min-content;
}


.NavigationSite {
    width: inherit;
}

.NavigationBlock {
    display: flex;
    justify-content: center !important;
    text-align: center;
}

    .NavigationBlock .row {
        width: 100%;
    }

/*quand c'est etendu....*/
@media (min-width: 576px) {
    .NavigationBlock {
        width: auto;
        display: block;
        justify-content: unset;
        text-align: left;
    }

    .NavigationSite .row {
        width: 100%;
    }
}




/* WORD */

.Word {
    background-color: #f2f2f2;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

@media screen and (min-width: 1088px) {
    .Word .Page {
        max-width: 960px;
    }
}

.Word .Page {
    margin: 0 auto;
    padding: 0;
    box-shadow: 0 1.6px 3.6px 0 #00000021, 0 .3px .9px 0 #0000001c;
    border: 1px solid #fff0;
    padding: 1.25rem;
    display: block;
    outline-color: #161616;
    background-color: #fff !important;
}

@media screen and (min-width: 1088px) {

    .Word .Page .Content {
        padding: 3rem;
    }
}

.Word .Page .Content {
    padding: 3rem 1.5rem;
}

    .Word .Page .Content img, .Word .Page .Content video {
        max-width: 100%;
        text-align: center;
        display: block;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        border: 0.1px #CCC solid;
        border-radius: 5px;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .Word .Page .Content p {
        text-align: justify;
    }

    .Word .Page .Content pre {
        border: .125rem solid #68217A;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .Word .Page .Content .alert {
        background-color: #68217A;
        color: white;
        padding-left: 100px;
        position: relative;
        min-height: 80px;
        display: inline-block;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

        .Word .Page .Content .alert::before {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 50px;
            position: absolute;
            left: 40px;
            top: 0;
            bottom: 0;
            margin: auto 0;
        }

        .Word .Page .Content .alert.Exclamation::before {
            content: "\21";
        }

        .Word .Page .Content .alert.Interogation::before {
            content: "\3f";
        }

    .Word .Page .Content .Togglable {
        margin-bottom: 30px;
        margin-top: 10px;
    }

        .Word .Page .Content .Togglable p:first-child {
            font-size: 1.25rem;
            font-weight: 400;
            margin-bottom:5px;
        }

        .Word .Page .Content .Togglable ul {
            color: #0065b3;
            cursor: pointer;
            word-wrap: break-word;
            text-decoration: none;
            list-style: none;
            border-inline-start: 1px solid #e6e6e6 !important;
            padding-inline-start: 0.5rem !important;
            font-size: .975rem;
            line-height: 2;
        }

        .Word .Page .Content .Togglable *:not(:first-child) {
            cursor: pointer;
        }


        .Word .Page .Content .Togglable a {
            color: inherit;
            text-decoration: unset;
        }

            .Word .Page .Content .Togglable a:hover {
                text-decoration: underline;
            }


        .Word .Page .Content .Togglable .ExpandCollapse {
            font-size: 0.975rem;
            color: rgb(0, 101, 179);
            margin-left: 10px;
            font-weight: 400;
            display: inline;
            padding: 5px;
            background-color: #efefef;
            margin-left: 0;
        }


    .Word .Page .Content .Title {
        text-align: center;
        font-size: calc(2.175rem + 1.5vw);
    }

    .Word .Page .Content .Title1 {
        color: #68217A;
        font-size: calc(1.375rem + 1.5vw);
        padding: 37px 0 3px;
    }

    .Word .Page .Content .Title2 {
        font-size: calc(1.325rem + 0.9vw);
        line-height: 1.2;
        padding: 15px 0 3px;
    }

    .Word .Page .Content .Title3 {
        font-size: calc(0.8rem + 0.9vw);
        color: #0070C0;
    }

    .Word .Page .Content .Metadata {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
    }



        .Word .Page .Content .Metadata li:not(:first-child) {
            list-style-type: square;
            margin-left: 30px;
        }


    .Word .Page .Content ol.Step {
        counter-reset: item;
        list-style-type: none;
        display: table;
        padding-left: 0px;
        margin-left: -5px;
    }

        .Word .Page .Content ol.Step li {
            display: table-row;
        }

            .Word .Page .Content ol.Step li:before {
                content: 'Etape ' counter(item, decimal) ' : ';
                border-radius: 4px;
                color: #333;
                font-size: 15px;
                margin: 0 5px 0 8px;
                padding: 4px 7px;
                counter-increment: item;
                font-weight: bold;
                display: table-cell;
                white-space: nowrap;
            }



/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
    overflow-x: hidden;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

/* Position of little button on the right of message title : not implemented yet */
.btn-save {
    position: absolute;
    right: 2px;
    top: 2px;
}

.accordion-heading {
    position: relative;
}

.unread {
    background-color: #4e73df !important;
    color: white !important;
}

/* Login page customization */
.jumbotron {
    background-color: #212529 !important;
    padding: 2rem 2rem !important;
}

/* Page Accueil : Side bar */
.bg-gradient-primary {
    background-image: linear-gradient(132deg,#333741 10%,#212529 100%) !important;
}


@media (max-width: 992px) {
    .InvertedRow {
        display: flex;
        flex-direction: column-reverse;
    }

    .DisplayAbove992 {
        display: none;
    }

    .DisplayBellow992 {
        display: block !important;
        opacity: 1 !important;
    }
}



@media screen and (min-width: 1078px) {

    .RightRenderedTitleImage {
        transform: translateX(0) !important;
    }

    .TitleAnimated.container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        margin: 0 auto;
        overflow: hidden;
    }

        .TitleAnimated.container > div {
            position: absolute;
            max-width: 400px;
            top: calc(50%);
            transform: translateY(-50%);
        }
}


@media screen and (min-width: 1700px) {
    .RightRenderedTitleImage {
        transform: translateX(25%) !important;
    }
}



/* Habillement*/


.SmartShadow {
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, .1), 0px 1.6px 3.6px rgba(0, 0, 0, .13);
}

.ULNoBullet {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.PlanSite a {
    color: inherit;
    text-decoration: unset;
}

    .PlanSite a:hover {
        text-decoration: underline;
    }


.Transf-10px {
    transform: translateY(10px);
}

.BG-White {
    background-color: white;
}

.BG-Gray {
    background-color: #f2f2f2;
}
.BG-GrayDarkerThanLight {
    background-color: #f5f5f5;
}

.BG-NearGray {
    background-color: #E8E6DF;
}

.overflow-clip {
    overflow: clip;
    overflow-clip-margin: content-box;
}

.VerticalGrandianted {
    display: grid;
    grid-template-columns: 20px calc(100% - 20px);
    grid-template-rows: 100%;
}

    .VerticalGrandianted .Gradiant {
        /*background: linear-gradient(180deg, #0067B8 0%, #50E6FF 100%);*/
        width: 5px;
        float: left;
        background: linear-gradient(to top, #0b8be9 0%,#28cef1 47.14%,#7ed367 100%);
        height: auto !important;
        margin-right: 20px;
        padding: 0 5px 0 0;
    }


.BeginBackgroundLinear {
    position: relative;
}

    .BeginBackgroundLinear::after {
        content: "";
        background: linear-gradient(0deg, #ECE5F7 26.19%, rgba(236, 229, 247, 0) 109.05%);
        background-image: linear-gradient(0deg, rgb(236, 229, 247) 26.19%, rgba(236, 229, 247, 0) 109.05%);
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: initial;
        width: 100%;
        left: 0px;
        bottom: -12px;
        position: absolute;
        z-index: -1;
        height: 25%;
    }


section.Black {
    background: #1B1F24 !important;
}

section.Green {
    background: #c7f27b !important;
}

section.Black .FlashyTitle {
    background: linear-gradient(119.88deg, #93F5EC 9.11%, #A77BF3 71.81%);
    background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}

section.Green .FlashyTitle, .FlashyTitle {
    background: linear-gradient(119.88deg, #f2917b 9.11%, #a77bf2 71.81%);
    background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero-grid-item * {
    position: relative;
}

.vs-hero-block {
    display: flex;
    align-items: center;
}

    .vs-hero-block * {
        margin-top: 0 !important;
        margin-bottom: 0;
    }

    .vs-hero-block p {
        margin-top: 0;
        margin-bottom: 20px;
    }

.hero-grid-logos1 {
    margin-left: 1.5rem;
    border-left: 1px solid #000;
    display: inline-flex;
    align-items: center;
    min-height: 23px;
}



.GSComShape {
    background-image: url(/Content/Images/Immersive/Forge/GSCOM-Shape.svg);
    background-position: top center !important;
    background-position-x: center !important;
    background-position-y: top !important;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: visible;
    transition: all;
}

.CorailIMGGradiantBackground {
    background-image: url(/Content/Images/Common/fondgradiantcorail.png);
    background-size: cover;
}

.PurpleGradiantBackground {
    background: linear-gradient(195deg, rgb(237, 236, 255) 15%, rgb(220, 212, 246) 70%);
}

.PurpleDarkGradiantBackground {
    background: linear-gradient(180deg, rgba(157,119,255,0) 0%, rgba(157,119,255,1) 100%);
}

.CyanGradiantBackground {
    background: linear-gradient(195deg, rgb(196, 249, 253) 15%, rgb(167, 221, 250) 70%);
}

/* Topography */

.fs-7 {
    font-size: 0.8rem !important;
}

@font-face {
    font-family: "MWF-MDL2";
    src: url("https://www.microsoft.com/mwf/_h/v2.98/mwf.app/fonts/mwfmdl2-v2.98.woff2") format("woff2"),url("https://www.microsoft.com/mwf/_h/v2.98/mwf.app/fonts/mwfmdl2-v2.98.woff") format("woff"),url("https://www.microsoft.com/mwf/_h/v2.98/mwf.app/fonts/mwfmdl2-v2.98.ttf") format("truetype"),url("https://www.microsoft.com/mwf/_h/v2.98/mwf.app/fonts/mwfmdl2-v2.98.svg") format("svg")
}

@font-face {
    font-family: 'SegoeUI';
    src: local('Segoe UI'),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2') format("woff2"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff') format("woff"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf') format("ttf");
    font-weight: 400
}

@font-face {
    font-family: 'SegoeUI';
    src: local('Segoe UI'),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Light/latest.woff2') format("woff2"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Light/latest.woff') format("woff"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Light/latest.ttf') format("ttf");
    font-weight: 100
}

@font-face {
    font-family: 'SegoeUI';
    src: local('Segoe UI'),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Semilight/latest.woff2') format("woff2"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Semilight/latest.woff') format("woff"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Semilight/latest.ttf') format("ttf");
    font-weight: 200
}

@font-face {
    font-family: 'SegoeUI';
    src: local('Segoe UI'),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Semibold/latest.woff2') format("woff2"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Semibold/latest.woff') format("woff"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Semibold/latest.ttf') format("ttf");
    font-weight: 600
}

@font-face {
    font-family: 'SegoeUI';
    src: local('Segoe UI'),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Bold/latest.woff2') format("woff2"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Bold/latest.woff') format("woff"),url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Bold/latest.ttf') format("ttf");
    font-weight: 600
}


a.c-call-to-action, button.c-call-to-action {
    outline-offset: -2px;
    padding-right: 16px;
    margin-top: 0;
    margin-right: 4px;
    padding: 10px 3px 7px 0;
    position: relative;
    border: 2px solid transparent;
    outline: 1px solid transparent;
    margin-left: 0;
    color: #0067b8;
    background: transparent;
    transition: none;
    white-space: normal;
    text-align: left;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 600;
    max-width: 100%;
    display: inline-block;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 transparent;
    text-decoration: none;
    line-height: 1.3;
    letter-spacing: 0;
}


    a.c-call-to-action:after, button.c-call-to-action:after {
        font-size: 11px;
        margin-top: 3px;
        margin-left: 3px;
        display: inline-block;
        position: relative;
        right: 0;
        content: "";
        vertical-align: top;
        font-family: "MWF-MDL2";
    }

    a.c-call-to-action:hover {
        box-shadow: 0 2px currentColor !important;
        margin-right: 5px;
    }

        a.c-call-to-action:hover:after {
            right: -4px;
        }

.Accroche {
    font-size: 62px;
    font-weight: 600;
    line-height: 72px;
    letter-spacing: 0em;
    padding: 38px 0 6px;
}

.AccrocheParapgraph {
    font-size: 15px;
}

h2 {
    padding: 37px 0 3px;
    font-weight: 100;
    letter-spacing: -.01em;
    font-size: 46px;
    line-height: 56px;
}

@media screen and (max-width: 768px) {
    .Accroche {
        font-size: 34px;
        font-weight: 600;
        line-height: 40px;
        padding: 37px 0 3px;
    }


    h2 {
        font-size: 21px;
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0em;
    }
}


.lead {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
}


/* Decorations */
.LinearHorzontalLine-left-blue {
    margin-bottom: 24px;
    width: 60px;
    height: 4px;
    background: linear-gradient(97.21deg, #0067B8 5.82%, #50E6FF 134%);
    margin-top: 32px !important;
    position: relative;
    padding: 0px !IMPORTANT;
}

.BottomBordered {
    border-bottom: solid #acacac 0.5px;
}

.TopBordered {
    border-top: solid #acacac 0.5px;
}



/* News*/


.NewWrapContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

    .NewWrapContainer .card {
        display: inline-block;
        margin: 1em 0 0 1em;
        width: 350px;        
    }

    .News{
        background-color:white;
    }

.News .Title {
    font-size: 50px;
    font-weight: 100;
}

.News .ImageTitle {
    width: 100%;
    text-align: center;
    margin-top: 40px;
}

    .News .ImageTitle > * {
        width: 100%;
    }

.News .Introduction {
    font-weight: 100;
    font-size: 120%;
    margin:40px 0;
}


.Introduction ~ div {
    margin: 20px 0;
}

/* card */

.TrippleCard {
    width: 316px;
    height: 210px;
}

.card-body {
    padding: 1rem 0rem;
}

.card-img-title {
    font-size: 100px;
    text-align: center;
}

/* layout */

.RightRenderedTitleImage {
    transform: translateX(-25%);
}



/* code part */

.codeHeader {
    box-sizing: content-box;
    background-color: var(--theme-code-header);
    color: var(--theme-text);
    border: 1px solid var(--theme-border);
    min-height: 30px;
    border-bottom: 0;
    flex-direction: row;
    margin-top: 16px;
    font-size: .8rem;
    display: flex;
}

    .codeHeader > .language {
        flex-grow: 1;
        padding: 2px 16px;
    }

    .codeHeader > .action {
        border: .125rem solid var(--theme-border);
        color: var(--theme-text);
        cursor: pointer;
        background-color: #0000;
        border-left-width: 1px;
        align-items: center;
        padding: 2px 10px;
        line-height: normal;
        display: flex;
    }

        .codeHeader > .action .successful-copy-alert.is-transparent {
            opacity: 0;
            transition: opacity .5s ease-in-out;
        }

pre {
    border: .125rem solid var(--theme-border);
    background-color: var(--theme-code-block);
    font-smooth: auto;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    tab-size: 4;
    hyphens: none;
    margin: 1rem 0 0;
    padding: 0 1rem;
    font-size: .875rem;
    line-height: 1.3571;
    overflow: auto;
}

.codeHeader + pre {
    margin-top: 0;
}

pre > code {
    border: 0;
    padding: 0;
    line-height: 1.3571;
    display: block;
    position: relative;
}

code {
    direction: ltr;
    font-size: 1em;
}

div.Remarks {
    border: .125rem solid var(--theme-border);
    background-color: #B4009E;
    height: 100px;
    grid-template-columns: 64px auto;
    display: grid;
    grid-template-rows: auto;
    word-spacing: normal;
    tab-size: 4;
    hyphens: none;
    margin: 1rem 0 0;
    padding: 0 1rem;
    font-size: .875rem;
    line-height: 1.3571;
}

    div.Remarks .Icon {
        grid-column: 1 / 2;
        width: 64px;
        height: 64px;
        fill: white;
        align-self: center;
    }

    div.Remarks .Text {
        grid-column: 2 / 3;
        color: white;
        align-self: center;
    }


/** Navigation */

.Navigation a {
    text-decoration: unset;
}

.nav-link {
    text-wrap: nowrap;
}

/** COUNT UP */

.CountingBox {
    width: 28vmin;
    height: 28vmin;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1em 0;
    position: relative;
    font-size: 16px;
    border-radius: 0.5em;
    background-color: #8DC8E8;
}

    .CountingBox i {
        color: #18f98f;
        font-size: 2.5em;
        text-align: center;
    }

    .CountingBox span.num {
        color: #ffffff;
        display: grid;
        place-items: center;
        font-weight: 600;
        font-size: 3em;
    }

    .CountingBox span.text {
        color: white;
        text-align: center;
        pad: 0.7em 0;
        font-weight: 400;
        line-height: 0;
    }

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


    .CountingBox {
        height: 26vmin;
        width: 26vmin;
        font-size: 12px;
    }
}

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


    .CountingBox {
        width: calc(50% - 40px);
        height: 30vmin;
        font-size: 14px;
    }
}

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

    .CountingBox {
        width: 100%;
        height: 25vmin;
        font-size: 8px;
    }
}




/*

    Print

*/

@media print {
    .PlanSite {
        display: none;
    }

    .PlanPath {
        display: none;
    }
}


/*
    video
*/


.VideoBackground {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    position: absolute;
    z-index:-1;
}

    .VideoBackground > video {
        position: absolute;
        bottom: 0;
        top: -33%;
    }