:root {
    --cae-main-minwidth: 800px;
    --cae-main-xpadding: 5px;
    --cae-main-leftmargin: 30px;
    --cae-main-rightmargin: 30px;
    --cae-main-bottommargin: 30px;
    --cae-railway-height: 72px;
}

html {
    margin: 0;
    padding: 0;
}

body {

    height: 100vh;
    min-width: var(--cae-main-minwidth);
    overflow-y: hidden;
    color: var(--cae-color-text);
    background-color: var(--cae-color-background);
    font-family: 'Open Sans', sans-serif;

    &.lightmode {
        --cae-color-background: var(--cae-color-lm-background);
        --cae-color-background-1: var(--cae-color-lm-background-d1);
        --cae-color-background-2: var(--cae-color-lm-background-d2);
        --cae-color-text: var(--cae-color-lm-text);
        --cae-color-text-inverse: var(--cae-color-lm-text-inverse);
        --cae-color-fixed-text: var(--cae-color-allmode-text);
        --cae-color-fixed-text-inverse: var(--cae-color-allmode-text-inverse);
        --cae-color-main-d8: var(--cae-color-lm-main-d8);
        --cae-color-main-d3: var(--cae-color-lm-main-d3);
        --cae-color-main-d2: var(--cae-color-lm-main-d2);
        --cae-color-main-d1: var(--cae-color-lm-main-d1);
        --cae-color-main: var(--cae-color-lm-main);
        --cae-color-main-l1: var(--cae-color-lm-main-l1);
        --cae-color-main-l2: var(--cae-color-lm-main-l2);
        --cae-color-main-l3: var(--cae-color-lm-main-l3);
        --cae-color-blue: var(--cae-color-lm-blue);
        --cae-color-bluegradient: var(--cae-color-lm-bluegradient);
        --cae-color-bluegradient-0deg: var(--cae-color-lm-bluegradient-0deg);
        --cae-color-violet: var(--cae-color-lm-violet);
        --cae-color-violet-15prc: var(--cae-color-lm-violet-15prc);
        --cae-color-violet-shadow: var(--cae-color-lm-violet-shadow);
        --cae-color-red: var(--cae-color-lm-red);
        --cae-color-mainmenu-shadow: var(--cae-color-lm-mainmenu-shadow);
        --cae-color-green: var(--cae-color-lm-green);

        --cae-color-datatable-rowbackground: var(--cae-color-lm-datatable-rowbackground);
        --cae-color-datatable-rowbackground-hover: var(--cae-color-lm-datatable-rowbackground-hover);
        --cae-color-datatable-headerbackground: var(--cae-color-lm-datatable-headerbackground);
        --cae-color-datatable-rowborder: var(--cae-color-lm-datatable-rowborder);
        --cae-color-datatable-rowselected: var(--cae-color-lm-datatable-rowselected);
        --cae-color-datatable-rowselected-hover: var(--cae-color-lm-datatable-rowselected-hover);
        --cae-color-datatable-checkbox-border: var(--cae-color-lm-datatable-checkbox-border);
        --cae-color-datatable-child-headerbackground: var(--cae-color-lm-datatable-child-headerbackground);

        --cae-color-form-control-border: var(--cae-color-lm-form-control-border);
        --cae-color-form-control-background-disabled: var(--cae-color-lm-form-control-background-disabled);
        --cae-color-form-control-foreground-disabled: var(--cae-color-lm-form-control-foreground-disabled);

        --cae-color-section-background: var(--cae-color-lm-section-background);

        /* --dt-column-ordering: var(--cae-color-main);
        --dt-column-ordering-alpha: 1.0; */
        & .visibleDM {
            display: none;
        }
    }

    &.darkmode {
        --cae-color-background: var(--cae-color-dm-background);
        --cae-color-background-1: var(--cae-color-dm-background-l1);
        --cae-color-background-2: var(--cae-color-dm-background-l2);
        --cae-color-text: var(--cae-color-dm-text);
        --cae-color-text-inverse: var(--cae-color-dm-text-inverse);
        --cae-color-fixed-text: var(--cae-color-allmode-text);
        --cae-color-fixed-text-inverse: var(--cae-color-allmode-text-inverse);
        --cae-color-main-d8: var(--cae-color-dm-main-d8);
        --cae-color-main-d3: var(--cae-color-dm-main-d3);
        --cae-color-main-d2: var(--cae-color-dm-main-d2);
        --cae-color-main-d1: var(--cae-color-dm-main-d1);
        --cae-color-main: var(--cae-color-dm-main);
        --cae-color-main-l1: var(--cae-color-dm-main-l1);
        --cae-color-main-l2: var(--cae-color-dm-main-l2);
        --cae-color-main-l3: var(--cae-color-dm-main-l3);
        --cae-color-blue: var(--cae-color-dm-blue);
        --cae-color-bluegradient: var(--cae-color-dm-bluegradient);
        --cae-color-bluegradient-0deg: var(--cae-color-dm-bluegradient-0deg);
        --cae-color-violet: var(--cae-color-dm-violet);
        --cae-color-violet-15prc: var(--cae-color-dm-violet-15prc);
        --cae-color-violet-shadow: var(--cae-color-dm-violet-shadow);
        --cae-color-red: var(--cae-color-dm-red);
        --cae-color-mainmenu-shadow: var(--cae-color-dm-mainmenu-shadow);
        --cae-color-green: var(--cae-color-dm-green);


        --cae-color-datatable-rowbackground: var(--cae-color-dm-datatable-rowbackground);
        --cae-color-datatable-rowbackground-hover: var(--cae-color-dm-datatable-rowbackground-hover);
        --cae-color-datatable-headerbackground: var(--cae-color-dm-datatable-headerbackground);
        --cae-color-datatable-rowborder: var(--cae-color-dm-datatable-rowborder);
        --cae-color-datatable-rowselected: var(--cae-color-dm-datatable-rowselected);
        --cae-color-datatable-rowselected-hover: var(--cae-color-dm-datatable-rowselected-hover);
        --cae-color-datatable-checkbox-border: var(--cae-color-dm-datatable-checkbox-border);
        --cae-color-datatable-child-headerbackground: var(--cae-color-dm-datatable-child-headerbackground);

        --cae-color-form-control-border: var(--cae-color-dm-form-control-border);
        --cae-color-form-control-background-disabled: var(--cae-color-dm-form-control-background-disabled);
        --cae-color-form-control-foreground-disabled: var(--cae-color-dm-form-control-foreground-disabled);

        --cae-color-section-background: var(--cae-color-dm-section-background);

        & .visibleLM {
            display: none;
        }
    }

    &.in-iframe {
        overflow-y: scroll;
        display: inline;
    }

    &.modeinfo {
        height: initial !important;
    }

    .selectize-dropdown {
        height: auto;

        .option {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .selected {
            background-color: var(--cae-color-main-d2);
            color: var(--cae-color-text);
        }

        .active.selected {
            background: var(--cae-color-main-d1);
            color: var(--cae-color-text);
        }

        .active:not(.selected) {
            background: var(--cae-color-main);
            color: var(--cae-color-text);
        }
    }
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.allTransitionON {
    transition: all 5s;
}

.d-none-do-not-remove-this-element {
    display: none !important;
}

body.dev.outline-all-for-test * {
    outline: solid 1px;

    &:hover {
        outline: solid 1px red;
    }
}

/* BOOTSTRAP overload */
:root {
    --bs-border-color: var(--cae-color-form-control-border);
}

.row, .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0;
    --bs-navbar-nav-link-padding-x: 0;
    --bs-navbar-nav-link-padding-y: 0;
}

.navbar-nav, .nav-link {
    --bs-navbar-nav-link-padding-x: 0;
    --bs-navbar-nav-link-padding-y: 0;
    --bs-nav-link-color: var(--cae-color-text);
}

.dropdown-item {
    --bs-dropdown-link-color: var(--cae-color-text);
}

.modal {
    --bs-modal-footer-gap: 0px;
}

.modal-content {
    --bs-modal-border-width: 0px;
}


.TODO {}

.HIDE-FOR-PROD {
    display: none !important;
}

/* buttons */
/* primary */
/* secondary */
/* third */
/* fourth picto */

.btn-caelista {

    cursor: pointer;
    --cae-hover-factor: 1.05;

    transition: transform 0.1s;

    &.nobg {
        background: none !important;
    }

    &:hover {
        transform: scale(var(--cae-hover-factor));
        transition: transform 0.15s;
    }

    &:disabled {
        cursor: default;

        &:hover {
            transform: scale(1);
        }
    }

    &.btn-rectangle {

        width: fit-content;
        min-width: 200px;
        height: 45px;
        border-radius: 5px;
        border-width: 1px;
        border-style: solid;
        line-height: 1.4em;
        font-size: 1em;

        &.btn-full {
            border-width: 0;

            &.btn-blue {
                color: var(--cae-color-allmode-text-inverse);
                background: var(--cae-color-bluegradient-0deg);

                &:disabled {
                    color: var(--cae-color-form-control-foreground-disabled) !important;
                    background: var(--cae-color-form-control-background-disabled) !important;
                    border-width: 0;
                }
            }

            &.btn-red {
                color: var(--cae-color-allmode-text-inverse);
                background: var(--cae-color-red);

                &:disabled {
                    color: #B1B1B1;
                    background: #DDE3E9;
                    border-width: 0;
                }
            }
        }

        &.btn-full-light {
            border-width: 0;
            font-size: 0.875em;
            font-weight: 600;
            padding: 10px;

            &.btn-blue {
                fill: var(--cae-color-blue);
                color: var(--cae-color-blue);
                background: var(--cae-color-main-d3);

                &:disabled {
                    color: var(--cae-color-form-control-foreground-disabled) !important;
                    background: var(--cae-color-form-control-background-disabled) !important;
                    border-width: 0;
                }
            }

            &.btn-red {
                color: var(--cae-color-allmode-text-inverse);
                background: var(--cae-color-red);

                &:disabled {
                    color: #B1B1B1;
                    background: #DDE3E9;
                    border-width: 0;
                }
            }

            &>div {

                display: flex;
                gap: 10px;
                align-items: center;
                justify-content: center;

                &>div:nth-child(1) {}

                &>div:nth-child(2) {}
            }
        }

        &.btn-outline {

            border-color: transparent;


            &.btn-blue {
                color: var(--cae-color-blue);
                background: linear-gradient(white, white) padding-box, var(--cae-color-bluegradient) border-box;

                &:disabled {
                    color: var(--cae-color-form-control-foreground-disabled) !important;
                    background: var(--cae-color-form-control-background-disabled) !important;
                    border-width: 0 !important;
                    cursor: default !important;
                }
            }

            &.btn-red {
                color: var(--cae-color-red);
                background: white;
                border-color: var(--cae-color-red);

                &:disabled {
                    color: #B1B1B1 !important;
                    background: #DDE3E9 !important;
                    border-width: 0 !important;
                    cursor: default !important;
                }
            }

            &.btn-neutral {
                color: var(--cae-color-text);
                background: transparent;
                border-color: var(--cae-color-text);

                &:disabled {
                    color: var(--cae-color-form-control-foreground-disabled) !important;
                    background: var(--cae-color-form-control-background-disabled) !important;
                    border-width: 0 !important;
                    cursor: default !important;
                }
            }

        }

        &.dropdown-toggle {
            display: flex;
            align-items: center;
            justify-content: center;

            &:after {
                content: " ";
                display: block;
                position: absolute;
                top: 50%;
                right: calc(0.75rem + -1px);
                margin-top: -7px;
                width: 1em;
                height: 1em;
                border: none !important;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-size: 1rem;
                transition: transform 0.1s;
            }

            &.show:after {
                transform: rotate(180deg);
                transition: transform 0.1s;
            }
        }
    }

    &.btn-circle-1 {

        --cae-hover-factor: 1.2;
        border: none;
        border-radius: 50%;
        background-color: var(--cae-color-main-l1);
        width: 35px;
        height: 35px;
        cursor: pointer;
        line-height: 1em;
        display: flex;
        align-items: center;
        justify-content: center;

        &.btn-darker {
            background-color: var(--cae-color-main);

            &:hover {
                background-color: var(--cae-color-main-d1);
            }
        }

        &>svg {
            width: 24px;
            height: 24px;
        }

        &:hover {
            background: var(--cae-color-main);
        }

        &:disabled {
            color: #BBB !important;
            fill: #BBB !important;
            background: white !important;
            cursor: default !important;
        }

        &.btn-info {}

    }

    &.btn-square {}

    &.btn-link {}

}

.picto-caelista-1 {

    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;

    &.bg {
        background-color: var(--cae-color-main-l1);
    }

    &.bgl {
        background-color: var(--cae-color-main);
    }

    &.rd {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }

    &>svg {
        width: 25px;
        height: 25px;
    }
}

/* third text */
.btn-third {
    width: 12.5em;
    height: 2.8125em;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.15s;
    color: white;
    border: solid 1px white;
}


.btn-third>a {
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 0.875em;
    color: var(--cae-color-fixed-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-third>a.nav-link {
    color: var(--cae-color-fixed-text);
    background-color: var(--cae-color-main);
    border-radius: 5px;
}

.btn-third>a>svg {
    width: 1rem;
    height: 1rem;
    padding: 0;
}

.btn-third:hover {
    background-color: var(--cae-color-main-d2);
    transition: all 0.15s;
}

.btn-third:hover>a {
    color: var(--cae-color-violet);
    fill: var(--cae-color-violet);
    transition: all 0.15s;
}


/* fourth text */
.btn-fourth {
    width: 1.875em;
    height: 1.875em;
    border-radius: 1em;
    background-color: var(--cae-color-main);
    transition: all 0.15s;
}

.btn-fourth.rectangle {
    width: 2em;
    height: 1.675em;
    border-radius: 0.4em;
}

.btn-fourth>a {
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 0.875em;
    color: var(--cae-color-fixed-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-fourth>a.nav-link {
    color: var(--cae-color-fixed-text);
    background-color: var(--cae-color-main);
    border-radius: 5px;
}

.btn-fourth>a>svg {
    width: 1rem;
    height: 1rem;
    padding: 0;
}

.btn-fourth:hover {
    background-color: var(--cae-color-main-d2);
    transition: all 0.15s;
}

.btn-fourth:hover>a {
    color: var(--cae-color-violet);
    fill: var(--cae-color-violet);
    transition: all 0.15s;
}



/* end BOOTSTRAP overload*/
.red {
    color: var(--cae-color-red);
    fill: var(--cae-color-red);
}

hr.sep-form {
    height: 1px;
    background-image: linear-gradient(90deg, white 0%, var(--cae-color-servicedark) 30%, var(--cae-color-servicedark) 70%, white 100%, transparent);
    opacity: 25%;
    border: none;
    margin-bottom: 1rem;
    margin-top: 0;
}

.dropdown-divider {
    border-bottom: dashed 0.9px;
    height: 0;
    margin: var(--bs-dropdown-divider-margin-y) calc((100% - 50px) * 0.5);
    overflow: hidden;
    border-top: none;
    opacity: 1;
    width: 50px;
}

.hideparams {
    display: none;
    height: 0px
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 50000s ease-in-out 0s;
}

.box-shadow-violet {
    box-shadow: 0px 4px 10px 0px var(--cae-color-violet-shadow)
}

.uppercase {
    text-transform: uppercase;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -1px) rotate(-1deg);
    }
}

@media (min-width:1680px) {
    .col-xxxl-1 {
        flex: 0 0 auto;
        width: calc(1 / 12 * 100%)
    }

    .col-xxxl-2 {
        flex: 0 0 auto;
        width: calc(2 / 12 * 100%)
    }

    .col-xxxl-3 {
        flex: 0 0 auto;
        width: calc(3 / 12 * 100%)
    }

    .col-xxxl-4 {
        flex: 0 0 auto;
        width: calc(4 / 12 * 100%)
    }

    .col-xxxl-5 {
        flex: 0 0 auto;
        width: calc(5 / 12 * 100%)
    }

    .col-xxxl-6 {
        flex: 0 0 auto;
        width: calc(6 / 12 * 100%)
    }

    .col-xxxl-7 {
        flex: 0 0 auto;
        width: calc(7 / 12 * 100%)
    }

    .col-xxxl-8 {
        flex: 0 0 auto;
        width: calc(8 / 12 * 100%)
    }

    .col-xxxl-9 {
        flex: 0 0 auto;
        width: calc(9 / 12 * 100%)
    }

    .col-xxxl-10 {
        flex: 0 0 auto;
        width: calc(10 / 12 * 100%)
    }

    .col-xxxl-11 {
        flex: 0 0 auto;
        width: calc(11 / 12 * 100%)
    }

    .col-xxxl-12 {
        flex: 0 0 auto;
        width: calc(100%)
    }
}

@media (min-width:1920px) {
    .col-xxxxl-1 {
        flex: 0 0 auto;
        width: calc(1 / 12 * 100%)
    }

    .col-xxxxl-2 {
        flex: 0 0 auto;
        width: calc(2 / 12 * 100%)
    }

    .col-xxxxl-3 {
        flex: 0 0 auto;
        width: calc(3 / 12 * 100%)
    }

    .col-xxxxl-4 {
        flex: 0 0 auto;
        width: calc(4 / 12 * 100%)
    }

    .col-xxxxl-5 {
        flex: 0 0 auto;
        width: calc(5 / 12 * 100%)
    }

    .col-xxxxl-6 {
        flex: 0 0 auto;
        width: calc(6 / 12 * 100%)
    }

    .col-xxxxl-7 {
        flex: 0 0 auto;
        width: calc(7 / 12 * 100%)
    }

    .col-xxxxl-8 {
        flex: 0 0 auto;
        width: calc(8 / 12 * 100%)
    }

    .col-xxxxl-9 {
        flex: 0 0 auto;
        width: calc(9 / 12 * 100%)
    }

    .col-xxxxl-10 {
        flex: 0 0 auto;
        width: calc(10 / 12 * 100%)
    }

    .col-xxxxl-11 {
        flex: 0 0 auto;
        width: calc(11 / 12 * 100%)
    }

    .col-xxxxl-12 {
        flex: 0 0 auto;
        width: calc(100%)
    }
}

@media (min-width:2560px) {
    .col-xxxxxl-1 {
        flex: 0 0 auto;
        width: calc(1 / 12 * 100%)
    }

    .col-xxxxxl-2 {
        flex: 0 0 auto;
        width: calc(2 / 12 * 100%)
    }

    .col-xxxxxl-3 {
        flex: 0 0 auto;
        width: calc(3 / 12 * 100%)
    }

    .col-xxxxxl-4 {
        flex: 0 0 auto;
        width: calc(4 / 12 * 100%)
    }

    .col-xxxxxl-5 {
        flex: 0 0 auto;
        width: calc(5 / 12 * 100%)
    }

    .col-xxxxxl-6 {
        flex: 0 0 auto;
        width: calc(6 / 12 * 100%)
    }

    .col-xxxxxl-7 {
        flex: 0 0 auto;
        width: calc(7 / 12 * 100%)
    }

    .col-xxxxxl-8 {
        flex: 0 0 auto;
        width: calc(8 / 12 * 100%)
    }

    .col-xxxxxl-9 {
        flex: 0 0 auto;
        width: calc(9 / 12 * 100%)
    }

    .col-xxxxxl-10 {
        flex: 0 0 auto;
        width: calc(10 / 12 * 100%)
    }

    .col-xxxxxl-11 {
        flex: 0 0 auto;
        width: calc(11 / 12 * 100%)
    }

    .col-xxxxxl-12 {
        flex: 0 0 auto;
        width: calc(100%)
    }
}

.nopointerevents {
    pointer-events: none;
}

/* SCROLL BARS MANAGEMENT*/
/* webkit: chrome, safari */
/* width */
.scroller,
.dt-scroll-body {
    --scroller: "on";

    &::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px lightgrey;
        border-radius: 0px;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
        background: var(--cae-color-main-d2);
        border-radius: 0px;
    }
}

.noscroller::-webkit-scrollbar {
    display: none;
}

.noscroller {
    scrollbar-width: none;
}

/* SELECTIZE */
.input-group .selectize-control:not(:first-child) .selectize-input {
    border-radius: 0.375rem;
}


ul.dropdown-services .card:hover {
    transform-origin: center;
    transform: scale(105%);
    transition: transform 100ms ease-in-out;
    animation-name: shake;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

.displaycontents {
    display: contents;
}

.displayflex {
    display: flex;
}

.displaynone {
    display: none;
}

.widthauto {
    width: auto;
}

.widthautoimportant {
    width: auto !important;
}

.fontweightbold {
    font-weight: bold;
}

.visibility_hidden_important {
    visibility: hidden !important
}

.btn.btn-primary {
    background: linear-gradient(180deg, #0500FF 0%, #7000FF 100%);
    color: white;
    border-color: #aaa;
    border-radius: 3px;
    font-size: 0.9em;
}

.btn.btn-primary:hover {
    border-color: var(--cae-color-servicedark);
    background: linear-gradient(0deg, #0500FF 0%, #7000FF 100%);
}

.btn.btn-primary.btn-form {
    border-radius: 6px;
    font-size: 0.9em;
    padding: 6px 20px;
}

.btn.btn-outline-primary {
    background: white;
    color: black;
    border-color: #888;
    border-radius: 3px;
    font-size: 0.9em;
}

.btn.btn-outline-primary:hover {
    border-color: var(--cae-color-servicedark);
    background: linear-gradient(180deg, var(--cae-color-servicedark11) 0%, var(--cae-color-servicedark22) 100%);
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    opacity: 0.6;
    background: #888;
}

.btn.btn-primary.btnCancel {
    color: #5000FF;
    background: linear-gradient(180deg, #0500FF05 0%, #7000FF11 100%);
    ;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {

    color: #555;
    background-color: none;
    border-color: white;
}

mainmenu {
    width: 100%;
    min-width: var(--cae-main-minwidth);
    top: 0;
    position: fixed;
    background: var(--cae-color-background-1);
    box-shadow: 0px 4px 4px 0px var(--cae-color-mainmenu-shadow);
    z-index: 1;

    & .menu {
        height: 100%;
    }

    & .navbar {
        height: var(--cae-height-mainmenu);
    }

    & ul>li {
        margin-left: 32px;

        &>a {
            text-transform: uppercase;
            color: var(--cae-color-text);

            &>img {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                width: 34px;
            }
        }
    }

    & .navbar-nav {
        margin-left: 50px;

        & .nav-link.active {
            font-weight: bold;
        }

        & .nav-link.account {
            font-weight: 600;
            border-radius: 50%;
        }

        & .nav-link.show {
            color: var(--cae-color-violet);
            fill: var(--cae-color-violet);
        }
    }

    & ul.mainentries li>a>svg {
        margin-bottom: 4px;
        margin-right: 0.5rem;
        width: 24px;
        height: 24px;
        fill: var(--cae-color-text);
    }

    /*     & .logopart {
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    } */

    & img.logo {
        height: 44px;
        padding-left: var(--cae-main-leftmargin);
        cursor: pointer;
    }

    & .logo_service_container {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        margin-left: var(--cae-main-leftmargin);

        & .logo_service {
            max-height: 40px;
            /* padding-left: 5px; */
            /* padding-right: 5px; */
            width: 45px;
            height: 40px;
            margin-top: 0px;
        }
    }

    & .service_name {
        font-weight: bold;
        font-size: 1em;
        margin-left: 20px;
        display: block;
        text-overflow: ellipsis;
        word-wrap: break-word;
        overflow: hidden;
        max-height: 3.6em;
        line-height: 1.8em;
        max-width: 300px;
        text-transform: uppercase;
    }

    & ul.disconnect {
        --margin-left: auto;

        & .nav-item {
            background-color: #eee;
            border-radius: 20px;
            padding-right: 10px;
            font-size: 0.8em;
        }

        & .nav-item a {
            line-height: 2em;
        }

        & .nav-item img {
            margin-top: -2px;
        }

        & .nav-item a {
            margin-top: 0px
        }
    }

    & ul .nav-item a:hover {
        /*transform: scale(1.0);*/
        text-shadow: 0.5px 0px 0px var(--cae-color-allmode-text);
        border-radius: 4px;
    }

    & .dropdown-menu {
        font-size: 0.8em;
        width: 230px;

        & li {
            margin-left: 10px;
            margin-right: 10px;

            :hover {
                background-color: var(--cae-color-main);
            }

            .red:hover {
                background-color: #FFEEEE;
                color: var(--cae-color-red) !important;
                fill: var(--cae-color-red) !important;
            }

            & .disabled {
                fill: var(--bs-nav-link-disabled-color);
            }

            &>a {
                text-align: left;
                text-transform: initial;

                svg {
                    width: 20px;
                    height: 20px;
                    margin: 0px 10px;

                }
            }
        }
    }

    & .dropdown-services {

        width: 233px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;


        & .containersrv {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            & .cardsrv {
                border: none;
                cursor: pointer;

                &:hover {

                    transform-origin: center;
                    transform: scale(105%);
                    transition: transform 100ms ease-in-out;
                    animation-name: shake;
                    animation-duration: 1.5s;
                    animation-iteration-count: infinite;
                }

                &.allservices {
                    width: 100%;

                    & .item {
                        width: 100%;

                        & .picto {
                            width: 100%;
                            border: solid 1px var(--cae-color-blue);
                            fill: var(--cae-color-blue);
                            text-align: center;
                        }
                    }


                }

                & .item {
                    & .picto {
                        width: 40px;
                        height: 40px;
                        padding: 5px;
                        border-radius: 5px;

                        & svg {
                            width: 30px;
                            height: 30px;
                        }
                    }

                    & .title {
                        display: none;
                    }
                }
            }

        }
    }

}

railway {
    height: var(--cae-railway-height);
    position: fixed;
    top: calc(0px + var(--cae-height-mainmenu));
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0px var(--cae-main-rightmargin);

    & .railway-container {
        font-size: 0.75em;

        & .content {
            display: flex;
            flex-direction: row;
            cursor: default;
            height: 100%;
            gap: 10px;

            &>div {
                margin: auto 0;
            }

            &>div.gotohome, &>div.gotofolder {
                &:hover {
                    font-weight: bold;
                    cursor: pointer;
                }
            }

            &>div:last-child {
                font-weight: bold;
            }
        }
    }

    & .quit-container {

        & .quit {
            height: 100%;
            align-content: center;
        }

        & button {
            display: flex;
            border: none;
            background: unset;
            transition: all 0.15s;
            color: var(--cae-color-caelistablue);
            fill: var(--cae-color-caelistablue);
            padding: 0;

            & svg {
                margin-top: -2px;
            }

            &>div {
                font-size: 0.875em;
                margin-left: 8px;
            }

            &:hover {
                transform: scale(1.1);
                transition: all 0.15s;
            }
        }
    }
}

body {

    &.modeinfo {
        &>div.main {
            --cae-main-princ-top: 0px !important;
            display: flex !important;
            flex-direction: column;

            &.dispo_principal {

                padding: 40px 20px 20px 20px;

                & .menu {
                    width: 100%;
                    margin-left: 0;

                    .nav-item {
                        &>a.active {
                            &>.txtobj {
                                width: auto;
                                justify-content: center;
                                border-bottom: solid 3px var(--cae-color-caelistablue);
                                padding-bottom: 10px;
                                width: 80%;
                            }
                        }
                    }

                }
            }
        }

        .workarea {
            margin-top: 35px;
            margin-right: 0px;
            width: 100%;
            height: 100%;
        }
    }

    &>div.main {

        &.dispo_principal {
            --cae-main-princ-top: calc(var(--cae-height-mainmenu) + var(--cae-railway-height));
            --cae-main-princ-padding: 15px;
            --cae-main-princ-gap-y: 20px;
            --cae-main-princ-menu-width: 260px;
            --cae-main-princ-menu-width-reduction: 0px;
            top: calc(0px + var(--cae-main-princ-top));
            position: fixed;
            width: 100%;
            height: calc(100% - var(--cae-main-princ-top) - var(--cae-main-bottommargin));
            display: grid;
            grid-template-columns: calc(var(--cae-main-princ-menu-width) - var(--cae-main-princ-menu-width-reduction) + 2 * var(--cae-main-princ-padding)) auto;
            grid-template-rows: 100%;
            gap: 0px 20px;
            grid-template-areas: ". .";
            transition: all 0.3s ease-out;

            body.modeinfo & {
                height: 100%;
            }

            & .menu {
                width: var(--cae-main-princ-menu-width);
                margin-left: var(--cae-main-leftmargin);

                & .items_menu {
                    --cae-menu-item-margin-left: 0px;

                    height: 100%;

                    & .background {
                        width: calc(var(--cae-main-princ-menu-width) - var(--cae-main-princ-menu-width-reduction));
                        background: var(--cae-backgroundservice_top_to_bottom_dark_to_light);
                    }

                    & nav.navbar.vertical-navbar {
                        height: 100%;

                        & .menu-container {
                            display: flex;
                            flex-wrap: inherit;
                            flex-direction: column;
                            height: 100%;
                            overflow: hidden;
                            align-items: start;
                            border-radius: 0.6em;
                            justify-content: flex-start;
                            padding: var(--cae-main-princ-padding);
                            margin: 0;

                            & li.nav-title-item {
                                margin-bottom: 16px;

                                & a.nav-title-link {
                                    color: white;
                                    text-decoration: none;
                                    text-transform: uppercase;
                                    display: flex;
                                }
                            }

                            & li.nav-item {

                                &.sub-item {
                                    margin-left: 10px;
                                }

                                & a.nav-link {
                                    color: white;
                                }
                            }

                            & .reduce {
                                font-size: 0.8em;
                                margin-top: 1em;
                                cursor: pointer;

                                & .svg_reduce {
                                    display: inherit;
                                    transform: rotate(90deg);
                                    transition: transform 0.25s;

                                    &:hover {
                                        display: inherit;
                                        transform: rotate(270deg);
                                        transition: transform 0.15s;
                                    }
                                }

                                & .svg_expand {
                                    display: none;
                                    transform: rotate(90deg);
                                    transition: transform 0.25s;

                                    &:hover {
                                        display: none;
                                        transform: rotate(270deg);
                                        transition: transform 0.15s;
                                    }
                                }

                                & img {
                                    margin-right: 0.4em;
                                }
                            }

                            & .navbarNav {
                                width: 100%;
                                --margin-top: 25%;
                                --margin-bottom: 75%;
                                margin-top: 60px;
                                line-height: 2.5em;

                                & .nav-item {
                                    margin-bottom: 10px;
                                    margin-left: var(--cae-menu-item-margin-left);
                                    width: calc(100% - var(--cae-menu-item-margin-left));
                                }

                                & a.nav-link {
                                    font-size: 0.85em;
                                    padding: 0px 0px;
                                    margin-bottom: 8px;
                                    cursor: pointer;
                                    display: flex;
                                }

                                & a.nav-link:hover {
                                    background-color: #EDEDFF22;
                                    border-radius: 5px;
                                }

                                & a.nav-link.active {
                                    background: linear-gradient(80deg, #EDEDFFEE 66%, white 100%);
                                    color: black;
                                    border-radius: 5px;
                                    width: calc(230px - var(--cae-menu-item-margin-left));
                                }

                                & a.nav-link.active img {
                                    filter: invert();
                                }

                                & a.nav-link img {
                                    margin-right: 1em;
                                }

                            }


                            & .txtobj {
                                display: contents;
                                transition: all 0.1s ease-out;
                                opacity: 100%;
                                --visibility: 100%;
                                text-transform: uppercase;
                                display: inline-block;
                            }

                            & a.reduceToggle {
                                text-decoration: none;
                                color: white;
                                display: flex;
                            }

                            & a.reduceToggle .txtobj {
                                display: inline-block;
                            }

                            & .txtobj {
                                transition: all 0.3s ease-out;
                            }


                            & {
                                transition: all 0.3s ease-out 0.1s;
                                display: block;
                            }

                            & .svg {
                                width: 24px;
                                height: 24px;
                                margin-left: 10px;
                                margin-right: 10px;
                                margin-top: 7px;
                                margin-bottom: 9px;
                                fill: white;
                                overflow: visible;
                            }

                            & .active .svg {
                                fill: black;
                            }
                        }
                    }
                }
            }

            &.reduced {
                --cae-main-princ-menu-width-reduction: 190px;
                transition: all 0.3s ease-out 0.1s;

                & .background {
                    transition: all 0.3s ease-out;
                }

                & .items_menu {
                    & .navbarNav {
                        /* width: auto !important;
                    transition: all 0.3s ease-out; */
                    }

                    & nav.navbar.vertical-navbar {

                        & .menu-container {
                            display: flex;
                            flex-wrap: inherit;
                            /* width: 70px; */
                            transition: all 0.3s ease-out;

                            & .svg_reduce {
                                display: none;
                            }

                            & .svg_expand {
                                display: inherit;
                            }

                            & .txtobj {
                                opacity: 0%;
                                transition: all 0.3s ease-out;
                                transform: scale(0) translateX(100px);
                            }

                            & a.reduceToggle .txtobj {
                                opacity: 0%;
                                transition: all 0.3s ease-out;
                                transform: scale(0);
                            }
                        }

                        & li.nav-item.sub-item {
                            margin-left: 0px;
                            transform: scale(0.8);
                        }
                    }
                }
            }
        }
    }
}

.workarea {



    width: calc(100% - var(--cae-main-rightmargin) + 2 * var(--cae-main-xpadding));
    margin-left: calc(0px - var(--cae-main-xpadding));
    margin-right: calc(var(--cae-main-rightmargin) - var(--cae-main-xpadding));
    padding-left: var(--cae-main-xpadding);
    padding-right: var(--cae-main-xpadding);
    margin-bottom: calc(0px - var(--cae-main-xpadding));
    padding-bottom: var(--cae-main-xpadding);
    overflow-x: hidden;
    border-radius: 20px;
    position: relative;

    & .panel {
        position: relative;
        height: 100%;

        & .folders {
            height: var(--cae-workarea-folders-height);
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            margin-bottom: var(--cae-workarea-spacebetween);
            padding-left: 2px;


            & ul {
                flex-direction: row;
                flex-wrap: nowrap;
                overflow-x: scroll;
                white-space: nowrap;
                gap: 32px;
            }

            & .navfolders {
                width: calc(100% - 92px);

                & .divfolders {
                    width: 100%;

                    & ul {
                        scroll-snap-type: x proximity;
                        overflow-x: scroll;
                        scroll-behavior: smooth;
                        -webkit-overflow-scrolling: touch;
                        position: relative;
                        width: fit-content;
                        max-width: 100%;
                        ;

                        & li {
                            scroll-margin: 10px;
                            scroll-snap-align: start;
                            scroll-snap-stop: normal;

                            & .nav-link {
                                font-size: 1em;
                                border-bottom: none;

                                &:hover {
                                    text-shadow: 0px 0px 0.5px var(--cae-color-text);
                                }
                            }

                            & a.nav-link.active {
                                border-bottom: solid 3px var(--cae-color-caelistablue) !important;
                                border-bottom-style: solid !important;
                                color: var(--cae-color-caelistablue) !important;
                                font-weight: 600 !important;
                                transition: none;
                            }

                            & a.nav-link.current {
                                border-bottom: solid 1px var(--cae-color-caelistablue);
                                border-bottom-style: dotted;
                                transition: none;
                                /* text-shadow: 0px 0px 0.25px var(--cae-color-text); */
                            }
                        }
                    }
                }
            }
        }


        & .typobject {
            border-radius: 0.8em;
            padding: 15px;
            line-height: 2.5em;
            margin-bottom: var(--cae-workarea-spacebetween);
            height: var(--cae-workarea-typobject-height);

            .typobjectlib {
                font-size: 1.75em;
                font-weight: bold;
                text-transform: uppercase;
            }
        }



        & .noobject {
            width: 100%;
            text-align: center;
            height: calc(100% - var(--cae-workarea-typobject-height) - var(--cae-workarea-folders-height) - 2*var(--cae-workarea-spacebetween));

            &>div {
                display: flex;
                flex-direction: column;
                height: 100%;
                align-items: center;
                justify-content: center;
                margin: auto;
            }

            & .noobjectlib {
                font-size: 1.75em;
                font-weight: bold;
                user-select: none;
                -webkit-user-select: none;
            }

            & .noobjectbutton {
                margin-top: 20px;
                margin-bottom: 20%;
            }


        }

        & .container-simulations {
            /** specific case of the simulations where we need a particular scroll */
            height: calc(100% - var(--cae-workarea-typobject-height) - var(--cae-workarea-folders-height) - 2* var(--cae-workarea-spacebetween));
            overflow-y: scroll;
        }


    }

    .title {
        &.section {
            z-index: 2;
            position: relative;
            margin-bottom: 30px;

            .panelTitle {
                padding: 15px;
                border-radius: 15px;

                .colTitle {
                    position: relative;
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    align-items: center;

                    .txtTitle {
                        line-height: 40px;
                        text-transform: uppercase;
                        font-weight: bold;
                        font-size: 1.75em;
                        margin-top: auto;
                        margin-bottom: auto;
                        color: var(--cae-color-text);
                    }

                    .edit {
                        margin-right: 5px;
                    }
                }
            }
        }
    }

    #mainDefine {
        overflow-y: scroll;
        overflow-x: hidden;
        position: relative;

        #mainSummary {
            --height: calc(100vh - 300px);
            overflow-y: scroll;

            &>div {
                margin-bottom: 30px;
            }

            & *:disabled,
            & div.disabled,
            & .selectize-input.disabled {
                background: none;
            }

            .bloc {
                .colTitle {
                    position: relative;
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 28px;

                    .txtTitle {
                        font-weight: bold;
                        font-size: 1.125em;
                        color: var(--cae-color-text);
                        margin-top: auto;
                        margin-bottom: auto;
                    }

                    .edit {
                        margin-right: 5px;
                        margin-top: 2px;
                    }
                }

                .divCorps {
                    font-size: 0.875em;
                    background-color: var(--cae-color-section-background);
                    border-radius: 10px;

                    .corps {

                        padding: 20px;

                        .rubcorps {
                            display: flex;
                            width: 100%;
                            justify-content: flex-start;
                            align-items: center;
                            gap: 20px;

                            margin-bottom: 27px;

                            &.islast {
                                margin-bottom: 0px !important;
                            }

                            #models & {
                                margin-bottom: 15px;
                            }

                            .l {
                                width: 250px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                gap: 10px;

                                label {
                                    font-weight: bold;
                                }
                            }

                            .r {

                                width: calc(100% - 250px - 20px);

                                div.selftag {
                                    margin-left: -5px;
                                    cursor: default;
                                }

                                .form-control {
                                    margin: 0;

                                    .selectize-input {
                                        border: 0;
                                        padding: 0;
                                        display: flex;
                                        min-height: auto;

                                        &::after {
                                            display: none;
                                        }

                                        >.item {
                                            margin: 0;
                                        }
                                    }

                                    input& {
                                        padding: 0;
                                        display: flex;
                                    }
                                }

                                .grp {
                                    display: flex;
                                    align-items: center;
                                    justify-content: flex-start;
                                    margin-left: -8px;
                                    gap: 10px;
                                }
                            }
                        }

                        &.editablediv {}
                    }
                }
            }


            /*             .input-group {
                flex-wrap: nowrap;
                height: 100%;
                align-items: center;
            }

            .input-group svg {
                width: 20px;
                margin: auto;
                height: 20px;
            }

            .input-group label {
                font-weight: bold;
                font-size: 0.85em;
            }

            .input-group #label {
                text-wrap: nowrap;
                overflow-x: scroll;
            }


            .form-control {
                border: none;
            }

            input,
            textarea {
                font-size: 0.9em;
                resize: none;
            }

            .form-control .selectize-input {
                border: none;
                font-size: 0.9em;
            }

            .form-control .selectize-input::after {
                display: none;
            }
 */
        }
    }

    #identification, #caracteristics, #composition, #accountmanagement {
        .divCorps {
            .corps-buttons {
                margin-bottom: 50px;
            }

            .corps {

                .form-control {

                    input& {
                        padding: 15px;
                        line-height: 26px;
                    }
                }
            }
        }

        .btnValid {
            &>div {
                position: absolute;
                bottom: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                gap: 20px;
                margin-top: 20px;
                margin-bottom: 5px;
            }
        }

    }


}

.arrows {
    display: flex;
    width: 92px;
    column-gap: 16px;
    align-items: center;

    & .arrow {}
}

svg {
    width: 24px;
    height: 24px;

    &.svg_small {
        width: 20px;
        height: 20px;
    }
}

div.dt-container {

    .dt-scroll-head {
        /* needed to see rounded borders while loading */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        visibility: hidden;
    }

    .dt-scroll-head, .dt-scroll-body {
        visibility: hidden;
        opacity: 0;
    }

    &.visible {
        .dt-scroll-head, .dt-scroll-body {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s;
        }
    }


    .dt-buttons {
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: flex-start;

        span.dt-button-spacer {
            margin: 0;
        }
    }

    thead {
        tr {
            background: var(--cae-color-headertable);
        }
    }

    table.dataTable.main {

        --caeloc-dt-select-color: var(--cae-color-main-d1);
        --caeloc-dt-select-color-outline: var(--cae-color-main);

        &>thead {
            &>tr {
                &>th {
                    height: 70px;
                    border-bottom: none;
                    font-size: 1em;
                    font-weight: 600;

                    &.dt-ordering-asc, &.dt-ordering-desc {
                        background-color: var(--cae-color-main-d1);
                    }

                    &.dt-orderable-asc, &.dt-orderable-desc {
                        outline: none;

                        &:hover {
                            background-color: var(--cae-color-main-d2);
                        }
                    }

                    span.dt-column-order {
                        &:before, &:after {
                            line-height: 12px;
                        }
                    }

                    &.select-checkbox>.dt-column-title {
                        cursor: pointer;

                        &:before {
                            display: block;
                            width: 16px;
                            height: 16px;
                            box-sizing: border-box;
                            content: " ";
                            margin-top: 0px;
                            margin-left: 9px;
                            border: 1px solid;
                            border-radius: 0px;
                        }
                    }
                }
            }
        }

        &>tbody {
            &>tr {
                &>td {

                    padding: 10px 10px;

                    &.cellspec {
                        /* text-wrap-mode: nowrap;*/
                        cursor: default;

                        &.main-column {
                            justify-content: center;
                            cursor: pointer;

                            &.dt-body-left {
                                justify-content: left;
                            }

                            .inprogress, .completed {
                                display: flex;
                                gap: 10px;
                                width: 100%;
                                justify-content: center;
                                /*max-width: 400px;*/
                            }

                            .name {}
                        }

                        .grp {
                            display: flex;
                            justify-content: center;
                            gap: 10px;

                            .grppicto {

                                &.public {
                                    fill: var(--cae-color-blue);
                                }

                            }

                            .grpname {
                                height: 100%;
                                margin: auto 0;
                            }
                        }
                    }
                }

                .sorting_1, .sorting_2, .sorting_3 {
                    box-shadow: none;
                }

                &>td.select-checkbox:before {
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 16px;
                    height: 16px;
                    box-sizing: border-box;
                    content: " ";
                    margin-top: -6px;
                    margin-left: -6px;
                    border: 1px solid;
                    border-radius: 0px;
                }

                &.selected {
                    background-color: var(--caeloc-dt-select-color);
                    outline: solid 1px var(--caeloc-dt-select-color-outline);

                    &>* {
                        background-color: var(--caeloc-dt-select-color);
                        box-shadow: none !important;
                        color: var(--cae-color-allmode-text);
                    }

                    &>td.select-checkbox:before {
                        content: "■";
                        line-height: 11px;
                        font-size: 22px;
                    }
                }

            }
        }

        &.hover {
            tbody {
                tr {
                    &:hover {
                        background-color: var(--cae-color-main-l2);

                        &>* {
                            box-shadow: none;
                        }

                        &>.sorting_1 {
                            box-shadow: none;
                        }

                        &.selected {
                            background-color: var(--caeloc-dt-select-color);

                            &>* {
                                background-color: var(--caeloc-dt-select-color) !important;
                                box-shadow: none !important;
                                color: var(--cae-color-allmode-text);
                            }
                        }

                    }


                }
            }
        }

        .dt-body-left {
            text-align: left;
        }

        .dt-body-center {
            text-align: center;
        }

        .dt-body-right {
            text-align: right;
        }

    }

    div.dt-layout-row {
        margin-top: 0px;
        margin-bottom: 0px;

        &.dt-cae-header {
            padding-bottom: 30px;
            border-bottom: solid 1px;
            border-color: #eee;
        }

        &.dt-layout-table {
            margin-top: 30px;
        }

    }

    &.dt-empty-footer .dt-scroll {}

    &.dt-empty-footer .dt-scroll-head {
        font-size: 0.875em;
        font-weight: 600;
        background: var(--cae-color-headertable);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    &.dt-empty-footer .dt-scroll-body {
        border-bottom: none;
        font-size: 0.875em;
        box-shadow: 0 4px 10px 0px var(--cae-color-violet-shadow);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-left: solid 1px var(--cae-color-violet-shadow);
        border-right: solid 1px var(--cae-color-violet-shadow);
        border-bottom: solid 1px var(--cae-color-violet-shadow);


        td.actionsbuttons {

            cursor: default;

            div.actionsbuttons {
                display: flex;
                justify-content: flex-end;

                .actionbutton {

                    &.tocomplete2 {
                        background: var(--cae-color-headertable) !important;
                    }

                    & svg {
                        cursor: pointer;
                        width: 24px;
                        height: 24px;
                    }
                }

                .nopointerevents {
                    width: 24px;
                    height: 24px;
                    cursor: default !important;
                    pointer-events: none;

                    &:hover {
                        transform: none;
                    }
                }
            }
        }
    }

    div.dt-processing {
        background: white;
        top: calc(max(50%, 300px));
    }

}


.selftag {
    display: flex;
    justify-content: center;
    text-overflow: ellipsis;
    word-wrap: break-word;
    text-wrap: nowrap;
    overflow: scroll;
    max-height: 3.6em;
    line-height: 1.5em;
    width: 200px;

    &>div {
        width: 100%;
        padding: 0px 10px;
    }

    &.simulation {
        justify-content: unset;
    }
}

.tag.styling-tag-type-1 {
    display: flex;
    height: 45px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.625em;
    overflow-wrap: break-word;
    word-break: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: scroll;
    text-align: center;
    text-transform: uppercase;
    align-items: center;
    transition: transform 0.15s;
    max-width: 400px;

    &>div {
        margin: auto;
        padding-left: 5px;
    }

    &.dimmed {
        pointer-events: none;
    }

    & span.br {
        width: 0;
        overflow: hidden;
        display: inline-block;
    }

    &.itemValue {
        background: var(--cae-color-itemvalue);
        color: white;

    }

    &.variable {
        border: solid 1px;
    }

    &.itemValue.variable {
        background: white;
        color: var(--cae-color-itemvalue);
        border-color: var(--cae-color-itemvalue);

    }

    &.tabItemValues {
        background: var(--cae-color-tabitemvalues);
        color: white;

    }

    &.tabItemValues.variable {
        background: white;
        color: var(--cae-color-tabitemvalues);
        border-color: var(--cae-color-tabitemvalues);

    }

    &.listItems {
        background: var(--cae-color-listitems);
        color: white;

    }

    &.listItems.variable {
        background: white;
        color: var(--cae-color-listitems);
        border-color: var(--cae-color-listitems);

    }

    &.profile {
        background: var(--cae-color-profile);
        color: white;

    }

    &.profile.variable {
        background: white;
        color: var(--cae-color-profile);
        border-color: var(--cae-color-profile);

    }

    &.timeOfUse {
        background: var(--cae-color-timeofuse);
        color: white;

    }

    &.function {
        background: white;
        color: var(--cae-color-function);
        border: solid 1px var(--cae-color-function);

    }

    &.formula {
        background: var(--cae-color-formula);
        color: white;

    }

    &.indicator {
        background: var(--cae-color-indicator);
        color: white;

        min-width: 80px;
    }

    &.metadata {
        background: var(--cae-color-metadata);
        color: white;

    }

    &.param {
        color: #3d9775;
        font-size: 80%;
        font-weight: 700;
    }

    &.period {
        min-width: unset;
        max-width: unset;
        width: 100%;
        line-height: 3em;
    }

    &.period>div {
        display: flex;
        justify-content: space-between;
    }

    &.period:hover {
        box-shadow: none;
    }

    &:not(.nohover):hover {
        transform: scale(1.02);
        transition: transform 0.15s;
    }

}

img.svgonload {
    visibility: hidden;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: auto;
}

form.styling_form_type_1 {

    .rowinput {
        margin-top: 22px;
    }

    .form-label {
        font-size: 0.75em;
        margin-bottom: 10px;
        font-weight: normal;
    }

    .form-control {

        font-size: 0.875em;

        input& {
            border-color: var(--cae-color-form-control-border);
            height: 45px;
            border: solid 1px var(--cae-color-form-control-border);
        }

        &::placeholder {
            font-style: italic;
            opacity: 0.5;
        }

        &.selectize-control {
            .selectize-input {
                border-color: var(--cae-color-form-control-border);
                height: 45px;
                background: transparent;

                &.not-full>input {
                    width: 100% !important;
                }

                &>* {
                    vertical-align: sub;
                    width: calc(100% - 40px);
                }

                &>input::placeholder {
                    font-style: italic;
                    opacity: 0.5;
                }

                &.focus {
                    border-color: var(--cae-color-form-control-border) !important;
                    outline: 0;
                    box-shadow: 0 0 0 0.25rem var(--cae-color-main);
                    background-color: var(--cae-color-main-l2) !important;
                }

                &.disabled {
                    background-color: var(--cae-color-form-control-background-disabled);

                    >.item {
                        color: var(--cae-color-form-control-foreground-disabled);
                    }
                }
            }

            .selectize-dropdown {
                height: auto;

                .option {
                    padding-top: 5px;
                    padding-bottom: 5px;
                }

                .selected {
                    background-color: var(--cae-color-main-d2);
                    color: var(--cae-color-text);
                }

                .active.selected {
                    background: var(--cae-color-main-d1);
                    color: var(--cae-color-text);
                }

                .active:not(.selected) {
                    background: var(--cae-color-main);
                    color: var(--cae-color-text);
                }
            }
        }

        &:disabled, &[readonly] {
            background-color: var(--cae-color-form-control-background-disabled);
            opacity: 0.7;
            cursor: auto;
        }

        &:focus {
            outline: 0;
            box-shadow: 0 0 0 0.25rem var(--cae-color-main-d2);
            border-color: var(--cae-color-form-control-border);
            background-color: var(--cae-color-main-l2);
        }
    }

    &.was-validated {

        :invalid~.invalid-feedback,
        :invalid~.invalid-tooltip {
            display: block;
            color: red;
        }

        /*    
        .form-control:valid:focus {
            color: var(--bs-body-color);
            background-color: var(--bs-body-bg);
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
        }
        */
        div.selectize-input.items.required {
            border-color: var(--bs-form-valid-border-color);

            &.focus {
                outline: 0;
                box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), .25);
                border-color: var(--cae-color-form-control-border);
            }

            &.invalid {
                border-color: var(--bs-form-invalid-border-color);

                &.focus {
                    outline: 0;
                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), .25);
                    border-color: var(--cae-color-form-control-border);
                }
            }
        }

        .form-control {
            &:invalid {
                border-color: var(--bs-form-invalid-border-color);
                padding-right: calc(1.5em + .75rem);
                background-image: url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 12 12\' width=\'12\' height=\'12\' fill=\'none\' stroke=\'%23dc3545\'%3e%3ccircle cx=\'6\' cy=\'6\' r=\'4.5\'/%3e%3cpath stroke-linejoin=\'round\' d=\'M5.8 3.6h.4L6 6.5z\'/%3e%3ccircle cx=\'6\' cy=\'8.2\' r=\'.6\' fill=\'%23dc3545\' stroke=\'none\'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right calc(.375em + .1875rem) center;
                background-size: calc(.75em + .375rem) calc(.75em + .375rem);
            }

            &:valid {
                border-color: var(--bs-form-valid-border-color);
                padding-right: calc(1.5em + .75rem);
                background-image: url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23198754\' d=\'M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z\'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right calc(.375em + .1875rem) center;
                background-size: calc(.75em + .375rem) calc(.75em + .375rem);
            }
        }
    }
}

form.styling_form_type_2 {

    .rowinput {
        margin-top: 27px;

        .divmodel & {
            margin-top: 16px;
        }
    }

    &>#models {
        margin-bottom: 250px;
    }

    .form-label {
        font-size: 1em;
        margin-bottom: 10px;
        font-weight: 600;
    }

    .form-control {

        input& {
            border-color: var(--cae-color-form-control-border);
            height: 45px;
            border: solid 1px var(--cae-color-form-control-border);
        }

        &::placeholder {
            font-style: italic;
            opacity: 0.5;
        }

        &.selectize-control {
            .selectize-input {
                border-color: var(--cae-color-form-control-border);
                height: 45px;
                --background: transparent;

                &.not-full>input {
                    width: 100% !important;
                }

                &>* {
                    vertical-align: sub;
                    width: calc(100% - 40px);
                }

                &>input::placeholder {
                    font-style: italic;
                    opacity: 0.5;
                }

                &.focus {
                    border-color: var(--cae-color-form-control-border) !important;
                    outline: 0;
                    box-shadow: 0 0 0 0.25rem var(--cae-color-main);
                    background-color: var(--cae-color-main-l2) !important;
                }

                &.disabled {
                    background-color: var(--cae-color-form-control-background-disabled);

                    >.item {
                        color: var(--cae-color-form-control-foreground-disabled);
                    }
                }
            }

            .selectize-dropdown {
                height: auto;

                .option {
                    padding-top: 5px;
                    padding-bottom: 5px;
                }

                .selected {
                    background-color: var(--cae-color-main-d2);
                    color: var(--cae-color-text);
                }

                .active.selected {
                    background: var(--cae-color-main-d1);
                    color: var(--cae-color-text);
                }

                .active:not(.selected) {
                    background: var(--cae-color-main);
                    color: var(--cae-color-text);
                }
            }
        }

        &:disabled, &[readonly] {
            background-color: var(--cae-color-form-control-background-disabled);
            opacity: 0.7;
            cursor: auto;
        }

        &:focus {
            outline: 0;
            box-shadow: 0 0 0 0.25rem var(--cae-color-main-d2);
            border-color: var(--cae-color-form-control-border);
            background-color: var(--cae-color-main-l2);
        }
    }

    &.was-validated {

        :invalid~.invalid-feedback,
        :invalid~.invalid-tooltip {
            display: block;
            color: red;
        }

        /*    
        .form-control:valid:focus {
            color: var(--bs-body-color);
            background-color: var(--bs-body-bg);
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
        }
*/
        div.selectize-input.items.required {
            border-color: var(--bs-form-valid-border-color);

            &.focus {
                outline: 0;
                box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), .25);
                border-color: var(--cae-color-form-control-border);
            }

            &.invalid {
                border-color: var(--bs-form-invalid-border-color);

                &.focus {
                    outline: 0;
                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), .25);
                    border-color: var(--cae-color-form-control-border);
                }
            }
        }

        .form-control {
            &:invalid {
                border-color: var(--bs-form-invalid-border-color);
                padding-right: calc(1.5em + .75rem);
                background-image: url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 12 12\' width=\'12\' height=\'12\' fill=\'none\' stroke=\'%23dc3545\'%3e%3ccircle cx=\'6\' cy=\'6\' r=\'4.5\'/%3e%3cpath stroke-linejoin=\'round\' d=\'M5.8 3.6h.4L6 6.5z\'/%3e%3ccircle cx=\'6\' cy=\'8.2\' r=\'.6\' fill=\'%23dc3545\' stroke=\'none\'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right calc(.375em + .1875rem) center;
                background-size: calc(.75em + .375rem) calc(.75em + .375rem);
            }

            &:valid {
                border-color: var(--bs-form-valid-border-color);
                padding-right: calc(1.5em + .75rem);
                background-image: url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23198754\' d=\'M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z\'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right calc(.375em + .1875rem) center;
                background-size: calc(.75em + .375rem) calc(.75em + .375rem);

                &:focus {
                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), .25);
                }
            }
        }
    }
}

span.svg_startinterval img, span.svg_endinterval img {
    transform: scale(1.2);
    height: 15px;
}


.toasts {
    position: fixed;

    .toast-header {
        border-bottom: none;
        background: none;
    }

    .toast {
        transform: translateX(1000px);
        display: block !important;

        &.show {
            transform: translateX(0px);
            transition: transform 1s;

            &.error {
                animation: 0.1s tilt-shaking;
            }
        }

        &.hide {
            transform: translateX(1000px);
            transition: transform 1s;
        }

        &.information {
            background: linear-gradient(180deg, #84F7CD 0%, #B1FFC3 100%);
        }

        &.avertissement {
            background: linear-gradient(180deg, rgba(255, 153, 66, 1) 0%, rgba(255, 194, 122, 1) 100%);
        }

        &.error {
            color: #FFF;
            background: linear-gradient(180deg, rgba(255, 7, 0, 1) 0%, rgba(255, 122, 122, 1) 100%);

            .toast-header {
                color: #FFF;
            }
        }

        .moreinfo {
            display: none;

            &:target {
                display: block;
            }
        }

        .moreinfolink {
            color: white;
            font-size: 0.9em;
            font-weight: bold;
        }
    }
}


#divCarousel {

    overflow-y: clip;
    padding-top: 10px;

    --cae-carousel-item-height: 200000px;
    --cae-carousel-item-width: 600px;
    --cae-carousel-item-margin: 10px;

    body.modeinfo & {
        --cae-carousel-item-width: 400px;
    }

    &.disabled {
        pointer-events: none;
        opacity: 50%;
    }

    ul#carousel {
        padding-left: 0px;

        li.item {

            display: block;
            position: absolute;
            background: #eee;
            color: #999;
            border-radius: 10px;
            border: solid 1px lightgray;
            height: var(--cae-carousel-item-height);
            overflow-y: scroll;

            &>div:first-child {
                margin: var(--cae-carousel-item-margin);
                --margin-top: 26px;
            }

            .def-width {

                width: var(--cae-carousel-item-width);

                .inner {
                    display: flex;

                    .divLeft {
                        position: absolute;
                        --margin-top: 0px !important;
                        text-align: left;
                        font-size: 26px;
                        z-index: 500;
                        width: calc(50% - var(--cae-carousel-item-margin));
                        height: 100%;
                    }

                    .divValue {}

                    .divRight {
                        position: absolute;
                        --margin-top: 0px !important;
                        text-align: right;
                        font-size: 26px;
                        z-index: 499;
                        height: 100%;
                        width: calc(50% - var(--cae-carousel-item-margin));
                        transform: translateX(100%);
                    }
                }
            }

            &.active {
                background: #fff;
                color: var(--cae-color-text);
                border: solid 3px var(--cae-color-violet);
            }

            &.transition {
                -webkit-transition: all 0.35s ease;
                -moz-transition: all 0.35s ease;
                -o-transition: all 0.35s ease;
                transition: all 0.35s ease;
            }

            &:not(.active) {
                cursor: pointer;
                background-color: var(--cae-color-background);
                filter: grayscale(0.3) contrast(0.95);
            }

            &:not(.active) .btn {
                --display: none;
                pointer-events: none;
                opacity: 50%;
                border: 1px solid;
            }

            &:not(.active).focus {
                color: var(--cae-color-text);
                --box-shadow: 0 0 20px black;
                z-index: 500 !important;
                background-color: var(--cae-color-background);
                filter: contrast(1);
            }

            &:not(.active):hover {

                border: solid 1px var(--cae-color-violet);

            }

        }
    }

    .btnUpdateVersion {
        position: absolute;
        width: 96%;
    }
}

#divCarouselLegacy {

    margin-top: 40px;

    #carousel {
        padding-left: 0px;
    }

    .divValue {
        width: 80%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 26px;
    }

    .divValueInner {
        display: inline-grid;
        margin-top: 25px;
        height: 120px;
    }

    .dates {
        font-size: 16px;
        text-align: center;
        height: 48px;
    }

    .unit {
        font-size: 60px;
        font-weight: bold;
        float: left;
        margin-left: 16px;
    }

    .valueUnit {
        --font-size-max: 72px;
        --font-size-min: 15px;
        --font-size-parent: .divValue;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
        font-size: 72px
            /* var(--fontSize) */
        ;
        font-stretch: var(--fontStretch);
        margin-top: auto;
        margin-bottom: auto;
    }

    .valueUnit .unitValue {
        font-size: 75%;
    }

    li.item>div:first-child {
        margin: 10px;
        --margin-top: 26px;
    }

    .item {
        display: block;
        position: absolute;
        /*
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -o-transform: scale(1);
        transform: scale(1);
        */
        background: #eee;
        color: #999;
        border-radius: 15px;
        box-shadow: 0 0 5px lightgray;
    }

    .item.active {
        /*
        -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -o-transform: scale(1);
          transform: scale(1);
      */
        background: #fff;
        color: #000;
        box-shadow: 0 0 10px gray;
    }

    .item.transition {
        -webkit-transition: all 0.35s ease;
        -moz-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        transition: all 0.35s ease;
    }

    .item:not(.active) {
        cursor: pointer;
    }

    .item:not(.active) .btn {
        --display: none;
        pointer-events: none;
        opacity: 50%;
        border: 1px solid;
    }

    .btn {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8),
    }

    #divCarousel.disabled {
        pointer-events: none;
        opacity: 50%;
    }

    .item:not(.active).focus {
        background: #ddd;
        color: #000;
        --box-shadow: 0 0 20px black;
        z-index: 500 !important;
    }

    .item:not(.active).focus .dates {
        color: #000;
    }

    .item.active .dates {
        color: var(--naelispurple);
    }

    .divLeft {
        position: absolute;
        --margin-top: 0px !important;
        text-align: left;
        font-size: 26px;
        z-index: 500;
        width: 50%;
        height: 100%;
    }

    .divRight {
        position: absolute;
        --margin-top: 0px !important;
        text-align: right;
        font-size: 26px;
        z-index: 499;
        height: 100%;
        width: 50%;
        transform: translateX(100%);
    }

    li .divLeft i, li .divRight i, li .divLeft svg, li .divRight svg {
        cursor: pointer;
        transition: all 0.35s ease;
        opacity: 20%;
        --margin-top: 40%;
    }

    li.active .divLeft i, li.active .divRight i, li.active .divLeft svg, li.active .divRight svg {
        cursor: pointer;
        transition: all 0.35s ease;
        opacity: 40%;
        --margin-top: 40%;
    }

    li .divLeft i:hover, li .divRight i:hover, li .divLeft svg:hover, li .divRight svg:hover {
        --font-weight: bold;
        transition: all 0.35s ease;
        opacity: 20%;
        --margin-top: 40%;
    }

    li.active .divLeft i:hover, li.active .divRight i:hover, li.active .divLeft svg:hover, li.active .divRight svg:hover {
        --font-weight: bold;
        transition: all 0.35s ease;
        opacity: 80%;
        --margin-top: 40%;
    }

    .btnUpdateVersion {
        position: absolute;
        width: 96%;
    }


    td.label {
        vertical-align: middle;
        text-align: left;
        font-size: 85%;
    }

    td.value {
        vertical-align: middle;
        font-weight: bold;
        white-space: nowrap;
        text-align: end;
    }

    th.label {
        vertical-align: middle;
        text-align: left;
        font-size: 85%
    }

    th.value {
        vertical-align: middle;
        font-weight: bold;
        text-align: right;
    }

    table>:not(caption)>*>* {
        --border: none;
        padding: 0.1rem .5rem;
    }

}

.html-interval {

    color: var(--cae-color-violet);
    fill: var(--cae-color-violet);

    .smart {

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;

        .labeltype {
            grid-column-start: 1;
            font-weight: 600;
        }

        .interval {
            grid-column-start: 1;
            font-weight: 700;
        }
    }

    .standard {

        display: grid;
        grid-template-columns: repeat(5, auto);
        gap: 10px;

        .labeltype {
            grid-column: span 5 / span 5;
            grid-column-start: 1;
            text-align: center;
            font-weight: 600;
        }

        .from, .to {

            display: grid;
            grid-template-columns: subgrid;
            grid-column: span 5;

            body.modeinfo & {
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .text {
                grid-column: 1;
                font-weight: 600;
            }

            &>* {
                padding: 0px 3px;
            }

            .svg1 {
                grid-column: 2;
                margin-top: -2px;
            }

            .date {
                grid-column: 3;
                font-weight: 700;
            }

            .svg2 {
                grid-column: 4;
                margin-top: -2px;
            }

            .time {
                grid-column: 5;
                font-weight: 700;
            }
        }
    }
}

@keyframes tilt-shaking {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(0eg);
    }

    75% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


.table>:not(caption)>*>* {
    background: transparent;
}

.stages {
    min-width: 576px;
}

.stages.section {

    --cae-stages-technical-margin: 5px;

    --cae-stages-buttons-top-height: 45px;
    --cae-stages-buttons-bottom-height: 115px;

    margin-left: calc(0px - var(--cae-stages-technical-margin));
    margin-right: calc(0px - var(--cae-stages-technical-margin));
    padding-left: calc(0px + var(--cae-stages-technical-margin));
    padding-right: calc(0px + var(--cae-stages-technical-margin));
    margin-top: calc(0px - var(--cae-stages-technical-margin));
    padding-top: calc(0px + var(--cae-stages-technical-margin));
    overflow-y: hidden;
    overflow-x: clip;
}

.clsSelectizeContainer {

    & .clsSelectizeItem svg.svg_selectize_main {
        width: 20px;
        height: 20px;
    }

    & .clsSelectizeItem {
        color: (var(--cae-color-text));
        display: inline-flex;
        margin-top: 4px;
        width: calc(100% - 25px);
        text-wrap-mode: nowrap;
        overflow-x: hidden;

        & .svg_selectize_picto {
            border-radius: 50%;
            background-color: var(--cae-color-main);
            width: 28px;
            height: 28px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 0px;
            margin-right: 10px;
            margin-top: -2px;

            & svg {
                width: 20px;
                height: 20px;
            }
        }
    }

    & .selectize-input {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-color: var(--cae-color-text);
        vertical-align: middle;

        & input {
            color: transparent !important;
        }
    }

    & .selectize-input:hover {
        background-color: var(--cae-color-main);
    }

    & .selectize-input.focus {
        border-color: var(--cae-color-violet);
        outline: 0;
        box-shadow: none;
        background-color: var(--cae-color-main);

    }

    & .selectize-input.focus.input-active {
        border-bottom-color: var(--cae-color-main);
        background-color: var(--cae-color-main);
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        cursor: pointer;
    }


}

.selectize-control.single .selectize-input:not(.no-arrow):after {
    content: " ";
    display: block;
    position: absolute;
    top: 50%;
    right: calc(0.75rem + -1px);
    margin-top: -7px;
    width: 1em;
    height: 1em;
    border: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1rem;
    transition: transform 0.1s;
}

.selectize-control.single .selectize-input.focus.input-active:not(.no-arrow):after {
    transform: rotate(180deg) translateY(4px);
    transition: transform 0.1s;

}

.clsSelectize.selectize-dropdown {

    border-radius: 0px;
    margin: 0;
    border: 1px solid var(--cae-color-violet-15prc);
    /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    box-shadow: 0px 2px 4px 0px var(--cae-color-violet-shadow);

    & .clsSelectizeOption {
        font-size: 0.8125em;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        color: var(--cae-color-text);
        border-bottom: solid 1px var(--cae-color-main);
    }

    & .clsSelectizeOption:last-of-type {
        border-bottom: transparent !important;
    }

    & .clsSelectizeOption .svg_selectize_item {

        width: 24px;
        height: 24px;
        margin-right: 10px;
        margin-top: 0px;
        float: right;

        & svg {
            width: 20px;
            height: 20px;
        }
    }

    & .clsSelectizeOption:not(.selected) .svg_selectize_item.checked {
        display: none;
    }

    & .clsSelectizeOption:not(.selected) .svg_selectize_item.unchecked {
        display: block;
    }

    & .clsSelectizeOption.selected .svg_selectize_item.checked {
        display: block;

        & svg {
            fill: var(--cae-color-violet);
        }
    }

    & .clsSelectizeOption.active {
        background-color: var(--cae-color-main-d1);
    }

    & .clsSelectizeOption.selected {
        background-color: var(--cae-color-main-d2);

        & img {
            filter: invert(1);
        }
    }

    & .clsSelectizeOption.selected .svg_selectize_item.unchecked {
        display: none;
    }

    .selectize-dropdown .selected {}

    .selectize-dropdown .selected img {}

    .selectize-dropdown .active {}

}

.stages ul.ulstages .nav-item {
    font-size: 1em;
    margin-right: 30px;
}

.stages .ulstages .nav-item button {
    text-align: left;
    color: black;
    min-width: 300px;
    padding-bottom: 14px;
}

.stages .ulstages .nav-item button.active {
    border-color: var(--cae-color-servicedark);
    border-width: 4px;
}

.stages .ulstages .nav-underline .nav-link:focus, .nav-underline .nav-link:hover {
    border-color: var(--cae-color-servicedark);
}

.stages .ulstages .nav-item button span.num1 {
    border: solid 3px var(--cae-color-servicedark11);
    border-radius: 16px;
    padding-left: 8px;
    padding-right: 8px;
    background: var(--cae-color-servicedark22);
}

.stages .ulstages .nav-item button span.num2 {
    border: solid 3px var(--cae-color-servicedark11);
    border-radius: 16px;
    padding-left: 8px;
    padding-right: 8px;
    background: var(--cae-color-servicedark22);
}

.stages .tab-content {
    /* margin-top: 25px; */
}


body.modal-open #floatingContainerComponents {
    pointer-events: none;
    z-index: 0;
}

.modal {
    --bs-modal-width: 470px;
    --bs-modal-padding: 0;

    /* margins needed to see focused items */
    --cae-technical-margin: 5px;
    --cae-modal-width: 420px;

    .modal-content {
        padding: 25px calc(25px - var(--cae-technical-margin));

        .modal-header {
            border: none;
            flex-direction: column;
            padding: 0;
            margin: 0 var(--cae-technical-margin);

            .btn-close {
                background: none;
                padding: 0;
                margin: 0;
                margin-left: auto;
                width: 25px;
                height: 25px;

                &:focus {
                    box-shadow: none;
                }
            }

            .modal-title {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                margin-top: 35px;
                margin-bottom: 35px;
                font-weight: bold;
                font-size: 1.25em;
                line-height: 25px;
            }
        }

        .modal-body {
            iframe.create, .body-wizard {
                height: 620px;
                width: calc(var(--cae-modal-width) + 2 * var(--cae-technical-margin));
                /*
                &.data {
                    height: 620px;
                }
                */
            }
        }

        .modal-footer {
            margin: 0 var(--cae-technical-margin);

        }
    }

    .modal-footer {
        border: none;
        justify-content: space-around;
        gap: 20px;
    }
}


body.modeinfo .menu {
    width: 100%;
}

body.modeinfo .menu .navbarNav {
    width: 100%;
}

body.modeinfo .menu .navbar-nav {
    flex-direction: row;
    font-size: 0.9em;
}

body.modeinfo .menu .nav-item {
    width: 50%;
    text-align: center;
}

body.modeinfo .menu .nav-item>a {
    cursor: pointer;
}

body.modeinfo .menu .nav-item>a:hover {
    transform: scale(1.1);
    font-weight: bold;
    transition: 0.15s all;
}

body.modeinfo .menu .nav-item>a.active>.txtobj {
    display: flex;
    margin: auto;
    width: fit-content;
    white-space: nowrap;
    border-bottom: solid 3px var(--cae-color-servicedark);
    font-weight: bold;
}

.modal.info {
    .modal-content {

        margin: 0;
        padding: 0;
        background: transparent;
        max-height: min(98vh, calc(900px - 5px));

        .modal-header {
            border: none;
            background: linear-gradient(180deg, white 0%, #e3e2ff 100%);
            margin: 0;

            &>.buttons {
                margin-left: auto;
                margin-right: 20px;
                margin-top: 20px;
                gap: 20px;
                display: flex;
            }
        }

        .modal-title {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            font-size: 1em;
            font-weight: unset;
            line-height: unset;
            color: var(--cae-color-violet);
            fill: var(--cae-color-violet);

            .title-picto {

                display: flex;
                align-items: center;
                justify-content: center;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                box-shadow: 0px 2px 4px 0px var(--cae-color-violet-15prc);
                background-color: white;

                svg {
                    width: 40px;
                    height: 40px;
                }
            }

            .title-typobj {
                font-size: 1.125em;
                text-transform: capitalize;
            }

            .title-name {
                font-weight: 700;
                margin-bottom: 20px;
            }
        }

        .modal-body {
            border-left: solid 10px rgba(255, 255, 255, 0.7);
            border-right: solid 10px rgba(255, 255, 255, 0.7);
            border-bottom: solid 10px rgba(255, 255, 255, 0.7);
            /*            border-left: solid 20px rgba(255, 255, 255, 0.5);
            border-right: solid 20px rgba(255, 255, 255, 0.5);
            border-bottom: solid 20px rgba(255, 255, 255, 0.5);*/
            height: calc(100vh);
            min-height: 650px;
            overflow-y: hidden;


            &>div {
                background-color: var(--cae-color-background);
                height: 100%;
            }

        }

        .modal-footer {
            margin: 0;
            border: none;
            justify-content: center;
            background-color: transparent;

            &>div {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: white;
            }
        }
    }

    iframe.info {
        height: inherit;
        width: 100%;
        transition: 0.15s all;
    }

    iframe.info.data {
        height: 620px;
    }

    button.create {
        background-color: #F2F2F2;
    }


    &>div.modal-dialog {
        max-width: 700px;
    }

    &>div.modal-dialog.function,
    &>div.modal-dialog.filter {
        max-width: 1000px;
    }


    iframe.info.service {
        height: inherit;
    }

}

body.modeinfo #mainSummary>.container {
    margin: auto;
}

body.modeinfo .stages.section {
    --height: calc(100vh - 60px);
    --height: initial !important;
    height: 100%;
}

body.modeinfo .preview.TABLEAU .divDisplayNovaeObject {
    max-height: fit-content;
}

.CodeMirror {

    --line-height: calc(3em - 8px);
    --tag-padding-v: 6px;
    --tag-padding-h: 6px;
    --font-ratio: 100%;

    line-height: var(--line-height);
    --height: auto !important;
    min-height: 85px;

    pre.CodeMirror-line,
    pre.CodeMirror-line-like {
        padding-right: 50px;
    }

    &.readonly {
        background-color: var(--cae-color-main-d1);
    }

    &.cm-s-default {
        border: solid 1px lightgrey;
    }

    &.cm-s-formule {
        border: 1px solid #DDD;
        font-family: "Helvetica", monospace;
        font-size: 0.875em;
        height: auto !important;
        width: 100%;
        /*margin: 0 auto*/
        border-radius: 5px;

        &.cm-s-eclipse {
            span {
                font-family: 'Open Sans', sans-serif;
                padding-top: var(--tag-padding-v);
                padding-bottom: var(--tag-padding-v);

                &.cm-interresultleft {
                    color: var(--cae-color-interresultleft);
                    text-transform: lowercase;

                    &::before {
                        content: "";
                    }

                    &::after {
                        content: "";
                    }
                }

                &.cm-interresultright {
                    color: var(--cae-color-interresultright);
                    text-transform: lowercase;

                    &::before {
                        content: "";
                    }

                    &::after {
                        content: "";
                    }
                }

                &.cm-data {

                    font-weight: normal;
                    color: #FFF;
                    border-radius: 3px;
                    cursor: pointer;
                    white-space: pre;
                    text-transform: uppercase;
                    padding-left: var(--tag-padding-h);
                    padding-right: var(--tag-padding-h);

                    &.cm-itemvalue {
                        background: var(--cae-color-itemvalue);

                        &::before {
                            content: " ";
                        }

                        &::after {
                            content: " ";
                        }
                    }

                    &.cm-tabitemvalues {
                        background: var(--cae-color-tabitemvalues);

                        &::before {
                            content: " ";
                        }

                        &::after {
                            content: " ";
                        }
                    }

                    &.cm-listitems {
                        background: var(--cae-color-listitems);

                        &::before {
                            content: " ";
                        }

                        &::after {
                            content: " ";
                        }
                    }

                    &.cm-profile {
                        background: var(--cae-color-profile);

                        &::before {
                            content: " ";
                        }

                        &::after {
                            content: " ";
                        }
                    }

                    &.cm-calendar {
                        background: var(--cae-color-calendar);

                        &::before {
                            content: " ";
                        }

                        &::after {
                            content: " ";
                        }
                    }

                    &.cm-timeofuse {
                        background: var(--cae-color-timeofuse);

                        &::before {
                            content: " ";
                        }

                        &::after {
                            content: " ";
                        }
                    }

                    &.cm-formula {
                        background: var(--cae-color-formula);

                        &::before {
                            content: " ";
                        }

                        &::after {
                            content: " ";
                        }
                    }
                }

                &.cm-metadata {
                    font-weight: normal;
                    color: #FFF;
                    border-radius: 3px;
                    cursor: pointer;
                    white-space: pre;
                    text-transform: uppercase;
                    padding-left: var(--tag-padding-h);
                    padding-right: var(--tag-padding-h);
                    background: var(--cae-color-metadata);

                    &::before {
                        content: " ";
                    }

                    &::after {
                        content: " ";
                    }
                }

                &.cm-variable-2 {
                    &::before {
                        content: " ";
                    }

                    &::after {
                        content: " ";
                    }
                }

                &.cm-variable-3 {
                    font-weight: bold;
                    color: #0000C0;

                    &::before {
                        content: " ";
                    }

                    &::after {
                        content: " ";
                    }
                }

                &.cm-operator {

                    color: black;

                    &::before {
                        content: " ";
                        font-size: var(--font-ratio);

                    }

                    &::after {
                        content: " ";
                        font-size: var(--font-ratio);
                    }
                }

                &.cm-function {
                    color: var(--cae-color-function);
                    font-weight: bold;
                    text-transform: none;

                    padding-left: var(--tag-padding-h);
                    padding-right: var(--tag-padding-h);

                    &::before {
                        content: " ";
                    }

                    &::after {
                        content: "";
                    }
                }

                &.cm-operator2 {
                    color: black;

                    &::before {
                        content: " ";
                        font-size: var(--font-ratio);
                    }

                    &::after {
                        content: " ";
                        font-size: var(--font-ratio);
                    }
                }

                &.cm-semicolumn {
                    &::before {
                        content: " ";
                        font-size: var(--font-ratio);
                    }

                    &::after {
                        content: " ";
                        font-size: var(--font-ratio);

                    }
                }

                &.cm-comment {
                    color: #3F7F5F;
                }

                &.cm-paramidentifier {
                    color: var(--cae-color-paramidentifier);
                    font-style: normal;
                    font-weight: normal;
                }

                &.cm-filter {
                    color: var(--cae-color-function);
                    font-style: oblique;
                    font-weight: normal;
                }

                &.cm-number {
                    color: var(--cae-color-number);
                }

                &.cm-variable {
                    color: #0000C0;
                }

                &.cm-string {
                    color: #2A00FF;
                }

                &.cm-encapsulated_string {
                    color: #2A00FF;
                }

                &.cm-string-2 {
                    color: #f50;
                }

                &.cm-qualifier {
                    color: #555;
                }

                &.cm-builtin {
                    color: #30a;
                }

                &.cm-bracket {
                    color: #cc7;
                }

                &.cm-tag {
                    color: #170;
                }

                &.cm-attribute {
                    color: #00c;
                }

                &.cm-link {
                    color: #219;
                }

                &.cm-error {
                    color: #f00;
                }

                &.cm-property {
                    color: black;
                }
            }

            .spbuttons {

                height: 32px;

                span {

                    &.cm-interresultleft {
                        text-transform: lowercase;

                        &::before {
                            content: "";
                        }

                        &::after {
                            content: "";
                        }
                    }

                    &.cm-interresultright {
                        text-transform: lowercase;

                        &::before {
                            content: "";
                        }

                        &::after {
                            content: "";
                        }
                    }

                    &.cm-data {

                        font-weight: normal;
                        border-radius: 3px;
                        cursor: pointer;
                        white-space: pre;
                        text-transform: uppercase;
                        padding-top: var(--tag-padding-v);
                        padding-bottom: var(--tag-padding-v);
                        padding-left: var(--tag-padding-h);
                        padding-right: var(--tag-padding-h);

                        &.cm-itemvalue {
                            &::before {
                                content: "\a0";
                            }

                            &::after {
                                content: "\a0";
                            }
                        }

                        &.cm-tabitemvalues {
                            &::before {
                                content: "\a0";
                            }

                            &::after {
                                content: "\a0";
                            }
                        }

                        &.cm-listitems {
                            &::before {
                                content: "\a0";
                            }

                            &::after {
                                content: "\a0";
                            }
                        }

                        &.cm-profile {
                            &::before {
                                content: "\a0";
                            }

                            &::after {
                                content: "\a0";
                            }
                        }

                        &.cm-calendar {
                            &::before {
                                content: "\a0";
                            }

                            &::after {
                                content: "\a0";
                            }
                        }

                        &.cm-timeofuse {
                            &::before {
                                content: "\a0";
                            }

                            &::after {
                                content: "\a0";
                            }
                        }

                        &.cm-formula {
                            &::before {
                                content: "\a0";
                            }

                            &::after {
                                content: "\a0";
                            }
                        }
                    }

                    &.cm-metadata {
                        font-weight: normal;
                        border-radius: 3px;
                        cursor: pointer;
                        white-space: pre;
                        text-transform: uppercase;
                        padding-top: var(--tag-padding-v);
                        padding-bottom: var(--tag-padding-v);
                        padding-left: var(--tag-padding-h);
                        padding-right: var(--tag-padding-h);

                        &::before {
                            content: "\a0";
                        }

                        &::after {
                            content: "\a0";
                        }
                    }

                    &.cm-variable-2 {
                        &::before {
                            content: "\a0";
                        }

                        &::after {
                            content: "\a0";
                        }
                    }

                    &.cm-variable-3 {
                        &::before {
                            content: "\a0";
                        }

                        &::afr {
                            content: "\a0";
                        }
                    }

                    &.cm-operator {
                        &::before {
                            content: "\a0";
                            font-size: var(--font-ratio);
                        }

                        &::after {
                            content: "\a0";
                            font-size: var(--font-ratio);
                        }
                    }

                    &.cm-function {
                        font-weight: bold;
                        text-transform: none;

                        &::before {
                            content: "\a0";
                        }

                        &::after {
                            content: "";
                        }
                    }

                    &.cm-operator2 {
                        &::before {
                            content: "\a0";
                            font-size: var(--font-ratio);
                        }

                        &::after {
                            content: "\a0";
                            font-size: var(--font-ratio);
                        }

                    }

                    &.cm-semicolumn {
                        &::before {
                            content: "\a0";
                            font-size: var(--font-ratio);
                        }

                        &::after {
                            content: "\a0";
                            font-size: var(--font-ratio);
                        }
                    }

                    &.cm-paramidentifier {
                        line-height: 1em;
                        color: #3d9775;
                        font-style: normal;
                        font-weight: normal;
                        font-size: 90%;
                    }
                }
            }

            .CodeMirror-activeline-background {
                background: #e8f2ff;
            }

            .CodeMirror-matchingbracket {
                /*outline:1px solid grey;*/
                font-weight: bold;
                color: green !important;
            }

            span.readonly {
                --text-decoration: underline;
            }

            span.readonly:hover {
                color: #eee;
            }

            .cm-s-formuleparam {
                border: 1px solid #DDD;
                font-family: "Helvetica", monospace;
                font-size: 16px;
                height: 32px !important;
                min-height: 32px !important;
                width: 100%;
                /*margin: 0 auto*/
            }

            .cm-s-eclipse .CodeMirror-line {
                min-height: 26.0781px;
            }

            .cm-s-eclipse .CodeMirror-line .spanbuttonsup,
            .cm-s-eclipse .CodeMirror-line .spanbuttoninfo {
                --margin-left: 7px;
                --margin-right: 5px;
                font-weight: bold;
                font-size: 1.0em;
                opacity: 0.8;
                display: inline-block;
                transition: all 0.1s;
                --transform: translateY(1px);
                cursor: pointer;
            }

            .cm-s-eclipse .CodeMirror-line .spanbuttonsup:hover,
            .cm-s-eclipse .CodeMirror-line .spanbuttoninfo:hover {
                position: relative;
                opacity: 1;
                --transform: translateY(1px) scale(1.0);
                transition: all 0.1s;
            }

        }
    }

    .CodeMirror-gutters {
        background-color: var(--cae-color-main-d1);
        border-right: none;
    }

    .CodeMirror-linenumber {
        padding: 0px 3px 0px 5px;
        min-width: 20px;
        color: var(--cae-color-text);
        opacity: 60%;
    }
}





.cm-s-syntax {
    --border: 1px solid #DDD;
    font-family: "Helvetica", monospace;
    font-size: 18px;
    height: 40px !important;
    width: 100%;
    /*margin: 0 auto*/
}

.cmSpanPopup {
    z-index: 2;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    --font-weight: bold;
    animation: fadeInAnimation ease 0.10s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

    transform: translateX(-10px) translateY(-34px);
    background-color: transparent;

    &.itemvalue {
        border-color: var(--cae-color-itemvalue);

        .spbutton {
            background: var(--cae-color-itemvalue);

            &.dummy {
                border: solid 1px var(--cae-color-itemvalue);
            }
        }
    }

    &.tabitemvalues {
        border-color: var(--cae-color-tabitemvalues);

        .spbutton {
            background: var(--cae-color-tabitemvalues);
        }
    }

    &.listitems {
        border-color: var(--cae-color-listitems);

        .spbutton {
            background: var(--cae-color-listitems);

            &.dummy {
                border: solid 1px var(--cae-color-listitems);
            }
        }
    }

    &.profile {
        border-color: var(--cae-color-profile);

        .spbutton {
            background: var(--cae-color-profile);

            &.dummy {
                border: solid 1px var(--cae-color-profile);
            }
        }
    }

    &.timeofuse {
        border-color: var(--cae-color-timeofuse);

        .spbutton {
            background: var(--cae-color-timeofuse);

            &.dummy {
                border: solid 1px var(--cae-color-timeofuse);
            }
        }
    }

    &.function {
        border-color: var(--cae-color-function);
        background-color: color-mix(in srgb, var(--cae-color-function) 6%, transparent);

        .spbutton {
            background: var(--cae-color-function);

            &.dummy {
                border: solid 1px var(--cae-color-function);
            }

        }
    }

    &.filter {
        border-color: var(--cae-color-filter);
        background-color: color-mix(in srgb, var(--cae-color-filter) 6%, transparent);

        .spbutton {
            background: var(--cae-color-filter);

            &.dummy {
                border: solid 1px var(--cae-color-filter);
            }
        }
    }

    &.formula {
        --border-color: var(--cae-color-formula);

        .spbutton {
            background: var(--cae-color-formula);

            &.dummy {
                border: solid 1px var(--cae-color-formula);
            }
        }
    }

    &.metadata {
        border-color: var(--cae-color-metadata);

        .spbutton {
            background: var(--cae-color-metadata);

            &.dummy {
                border: solid 1px var(--cae-color-metadata);
            }
        }
    }

    &.bracketclose {
        --border-color: red;
        background: #FF000011;

        .spbutton {
            background: red;

            &.dummy {
                border: solid 1px red;
            }
        }
    }

    .spbuttons {
        display: flex;

        .spbutton {
            display: flex;

            &>div {
                margin-top: auto;
                margin-bottom: auto;
                opacity: 0.8;

                svg {
                    fill: white;
                    width: 20px;
                    height: 20px;
                    margin-top: -5px;
                }
            }

            &:hover>div {
                opacity: 1;
            }

            &.last {
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
                border-right: solid 1px white;

                &>div {
                    padding-right: 5px;
                }
            }

            &.dummy {
                cursor: default;
                background: transparent;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;

                &>div {
                    visibility: hidden;
                }
            }

            &.delete {
                padding-left: 5px;
                cursor: pointer;
                color: white;
            }

            &.copy {
                padding-left: 5px;
                cursor: pointer;
                color: white;
                font-size: 0.6em;
            }

            &.select {
                padding-left: 5px;
                cursor: pointer;
                color: white;
                font-size: 0.6em;
            }

            &.info {
                padding-right: 5px;
                padding-left: 5px;
                cursor: pointer;
                color: white;
            }

        }
    }
}

.col-0 {
    width: 0;
    padding: 0;
    overflow: hidden;
}

.no-data-png {
    background: url(/img/components-no-data.png) no-repeat center;
    height: 200px;
}

#progression {
    position: relative;
    height: calc(100vh - 310px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .backgroundprogression {

        height: min(70%, 600px);
        position: absolute;
        z-index: 1;

        img {
            opacity: 20%;
            height: 100%;
        }
    }

    .circleprogression {
        height: min(70%, 600px);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 30px;
        z-index: 2;
        --percentcircleprogression: 0;

        .percent {
            position: relative;
        }

        svg {
            position: relative;
            width: 220px;
            height: 220px;
            transform: rotate(-90deg);

            circle {
                width: 100%;
                height: 100%;
                fill: none;
                stroke: #f0f0f0;
                stroke-width: 20;
                stroke-linecap: round;

                &:last-of-type {
                    stroke-dasharray: 625px;
                    stroke-dashoffset: calc(625px - (625px * var(--percentcircleprogression)) / 100);
                    stroke: var(--cae-color-servicedark)
                }
            }
        }


        .number {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            div {
                font-weight: bold;
                font-size: 3rem;

                span {
                    font-size: 2rem;
                }
            }
        }

        .title {
            font-weight: bold;
            font-size: 1.2em;
            animation-name: shake;
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }
    }
}


.panelVisible.shown {
    display: block;
}

.panelInvisible.shown {
    display: none;
}

.panelVisible {
    position: static;
}

.panelInvisible {
    position: absolute;
    top: -1000000px;
    width: 100%;
}

.serviceinfo {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.875rem;

    .section {

        padding: 20px;
        width: 100%;

        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: start;

        h3 {
            font-size: 1.125rem;
            font-weight: 600;
        }

        p {}

        &.caracteristics {


            .array {

                display: flex;
                flex-direction: column;
                gap: 10px;

                .line {

                    display: flex;
                    flex-direction: row;
                    gap: 10px;

                    .column {

                        &.title {
                            width: 100px;
                        }

                        &.universes, &.fluids {
                            width: auto;



                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            column-gap: 10px;
                            row-gap: 5px;

                            .univers {
                                padding: 5px 10px;
                                border-radius: 5px;
                            }

                        }
                    }
                }
            }
        }

        &.algorithms {
            ul {
                line-height: 1.7em;

                &>ul {
                    list-style-type: disc;
                }
            }


        }
    }

    .separator {

        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 10px;

        &>div {
            height: 0px;
            width: 25%;
            border-top: dashed 1px #999;

        }
    }
}