:root {
    --couleur-fond-bt-lig-grille: white;
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font: 12px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
    touch-action: manipulation;
}

.dx-state-disabled {
    opacity: 0.7 !important;
}

.dx-empty-message {
    text-align: center !important;
}

/* change la couleur de background du toast warning */
.dx-toast-warning {
    background-color: orange;
}

/* surcharge height toolbar grid (pour pareil dans theme normal et compact) */
.dx-toolbar .dx-toolbar-items-container {
    height: 56px;
}

.dx-scheduler-header {
    height: 58px;
}
/* FIN surcharge height toolbar grid (pour pareil dans theme normal et compact) */

/* fake height TD */
.td_fake_height {
    height: 1px;
}

@-moz-document url-prefix() {
    .td_fake_height {
        height: 100%;
    }
}

/* FORCE LA TRASNPARENCE SUR TUIMAGEEDITOR */
/*.tui-image-editor-container canvas {
    background-color: transparent !important;
}*/

/*@-moz-document url-prefix() {
    .tr_fake_height {
        height: 1px;
    }

    .td_fake_height {
        height: auto;
    }
}*/
/* END fake height TD */

.gridhisto .dx-datagrid .dx-row > td {
    padding: 5px
}

.gridhisto .dx-datagrid > .dx-datagrid-headers, .dx-datagrid > .dx-datagrid-rowsview, .dx-datagrid > .dx-datagrid-total-footer {
    background-color: transparent
}

.gridhisto .dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused) {
    background-color: transparent
}

.CodeMirror-code {
    font-family: Barlow condensed;
    font-size: 14px;
}

.dx-filterbuilder-overlay.dx-filterbuilder-operations .dx-treeview-item .dx-icon {
    font-size: 110%
}
/* Gérer placement controle dans filterbuilder */
.ctrlinfilterbuilder {
    display: inline-block;
    vertical-align: middle;
    margin-top: -7px;
    margin-bottom: -4px;
}

.dxgridpopsoft .dx-datagrid .dx-datagrid-table .dx-header-row > td {
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: Barlow condensed;
}

.dx-ctrlgridentete .dx-toolbar-items-container {
    height: 54px !important;
}

.dx-texteditor-label {
    opacity: 0.3;
}

.dx-ctrlvirtualgridanim .dx-command-select {
    opacity: 0;
}

.gridexcel .dx-datagrid .dx-row > td {
    padding: 5px;
    font-family: Barlow condensed;
    font-weight: 200;
}

.gridexcel .dx-command-select {
    width: 32px !important;
    min-width: 32px !important;
}

.gridexcel .dx-editor-cell .dx-texteditor .dx-texteditor-input {
    height: 31px;
    padding: 0 5px;
}

.gridexcel .dx-editor-cell .dx-texteditor .dx-tag-container {
    min-height: 31px;
}

.gridexcel .dx-texteditor.dx-editor-filled .dx-texteditor-input {
    padding-top: 3px;
}

.gridexcel .dx-texteditor.dx-editor-filled .dx-lookup-field,
.gridexcel .dx-texteditor.dx-editor-filled .dx-placeholder::before,
.gridexcel .dx-texteditor.dx-editor-outlined .dx-lookup-field,
.gridexcel .dx-texteditor.dx-editor-outlined .dx-placeholder::before,
.gridexcel .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    padding-top: 9px;
    padding-left: 5px;
    font-size: 90%;
    opacity: 0.4;
}

.dxvirtualgridmodifinput input {
    height: 20px !important;
    padding: 0px 5px !important;
    font-size: 13px;
}

.dxvirtualgridmodifinputtel input {
    height: 20px;
    font-size: 13px;
}

.dxvirtualgridmodifinputradio .dx-ctrlradiogroup {
    padding: 5px;
}

.dxvirtualgridmodifinputtagbox .dx-texteditor-input-container {
    padding: 4px;
}

.dxvirtualgridmodifinputtagbox .dx-tag-container {
    padding-top: 0;
    padding-bottom: 1px;
}

.dxvirtualgridmodifinputtagbox .dx-placeholder {
    top: -10px;
}

.dxvirtualgridmodif .dx-editor-filled.dx-texteditor-with-floating-label .dx-texteditor-label, .dx-editor-filled.dx-texteditor-with-label .dx-texteditor-label {
    top: 0
}
/* placeholder gridexcel */
.dx-button-has-icon {
    min-width: 16px
}
/* labelfloat editor */
.dx-editor-filled.dx-texteditor-with-floating-label .dx-texteditor-label, .dx-editor-filled.dx-texteditor-with-label .dx-texteditor-label {
    top: 5px;
}

.dx-datagrid-group-panel .dx-group-panel-item {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* animation loading cell datagrid */
@keyframes colordatagridload {
    0% {
        background: rgba(51, 51, 51,1);
    }

    20% {
        background: rgba(45, 45, 45,0.8);
    }

    40% {
        background: rgba(40, 40, 40,0.6);
    }

    60% {
        background: rgba(40, 40, 40,0.6);
    }

    80% {
        background: rgba(45, 45, 45,0.8);
    }

    100% {
        background: rgba(51, 51, 51,1);
    }
}

.dx-editor-filled.dx-texteditor-with-floating-label.dx-dropdowneditor-active .dx-texteditor-label, .dx-editor-filled.dx-texteditor-with-floating-label.dx-state-focused .dx-texteditor-label, .dx-editor-filled.dx-texteditor-with-floating-label.dx-textarea.dx-state-focused .dx-texteditor-label {
    top: 2px;
}
/**/

/* Switch plus grand */
.bigswitch .dx-switch-container::before {
    height: 24px;
}
/* FIN Switch plus grand */

/* POUR montrer le texte dans le off */
.dx-switch-off {
    display: inherit !important;
}

/* kanban */
/*.listkanban {
    border-radius: 8px;
    margin: 5px;
    background-color: rgba(128, 128, 128, 0.4);
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}*/
#kanban {
    white-space: nowrap;
}

.dx-card {
    margin: 0;
    word-break: break-all;
    font-family: barlow condensed;
    font-size: 110%;
    position: relative;
    overflow: visible;
}

.list {
    border-radius: 8px;
    margin: 5px;
    background-color: rgba(128, 128, 128, 0.4);
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}

.list-title {
    font-size: 16px;
    padding: 0 5px;
    font-weight: bold;
    cursor: pointer;
}

.dxgridkanban .dx-datagrid-focus-overlay {
    display: none !important;
}
/*.cardkanban {
    position: relative;
    box-sizing: border-box;
    width: 230px;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}*/
.cardkanban-subject {
    padding-bottom: 10px;
}

.gridanim .dx-datagrid {
    background-color: transparent
}

.gridanim .dx-group-row {
    background-color: transparent !important
}

.cardkanban-assignee {
    opacity: 0.6;
}
/* FIN kanban */

.dx-tag-content {
    font-family: Barlow condensed;
}

/* barlow textbox */
.barlow .dx-texteditor-input {
    font-family: Barlow condensed !important;
}

.barlowpadding .dx-texteditor-input {
    line-height: 1.1;
    padding: 0 3px !important;
}

.barlow .dx-texteditor-label {
    font-family: Barlow condensed !important;
}

.barlow input {
    font-family: Barlow condensed !important;
}
/* FIN barlow textbox */
/* center textbox */
.center .dx-texteditor-input {
    text-align: center !important;
}

.center .dx-texteditor-label {
    text-align: center !important;
}

.center input {
    text-align: center !important;
}
/* FIN center textbox */

/* dxtabs line height*/
.tablineheight .dx-tab-text {
    line-height: 1.3;
}
/** enleve le padding des forms */
.dx-layout-manager .dx-field-item:not(.dx-first-row) {
    padding-top: 0;
}

.dx-layout-manager .dx-field-item {
    padding-bottom: 0;
}

.noitalic {
    font-style: normal !important;
}

.dx-field-item-content:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs) {
    padding-top: 10px;
}
/** FIN enleve le padding des forms **/
form {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

table {
    border-spacing: 0;
    border-collapse: separate;
}

a {
    text-decoration: underline;
}

    a:hover {
        text-decoration: none;
        font-weight: bold;
    }

.dxradiobuttonmini .dx-radiogroup-horizontal .dx-radiobutton {
    margin-right: 10px;
}

.dxradiobuttonmini .dx-radio-value-container {
    padding-right: 5px;
}

.dx-placeholder {
    font-style: italic;
    font-size: 12px;
    color: LightSlateGray;
}

/* enleve la ligne des zone de saisie */
.dx-texteditor.dx-editor-underlined:after {
    border-bottom: none;
}
/* enlève la barre horizonthal des groupes dans les forms */
.dx-form-group-with-caption > .dx-form-group-content {
    border-top: none;
}
/* met en italique les label des forms */
.dx-field-item-label-text {
    opacity: 0.15;
    font-style: italic;
}
/* Enleve les bords des dropdownbutton */
.dx-button-mode-outlined {
    border: none;
}
/* arrondi le hover des dropdownbutton */
.dxctrlbutton.dx-buttongroup-item.dx-button-mode-outlined.dx-button, .dx-buttongroup-item.dx-button-mode-contained.dx-button {
    border-radius: 50%;
}

/* state-hover */
.state-hover-template:hover {
    border: 1px dotted var(--dx-color-text) !important;
}
/* texture modif grid */
/*.texture_modif_grid {
    background-image: radial-gradient(var(--color_update) 2px, transparent 2px);
    background-size: 5px 5px;
}*/

/* state-hover */
.state-hover:hover {
    /*background-color: rgba(255,255,255,.05) !important;*/
    cursor: pointer;
    background-color: rgba(120,120,120,1) !important;
}

/* Quand un "state-hover" est à l'intérieur d'un "dx-state-focused" */
.dx-tagbox-popup-wrapper .dx-state-focused .state-hover {
    /* styles spécifiques dans ce cas */
    background-color: rgba(120,120,120,1) !important;
}

.state-hover-rgba:hover {
    /*background-color: rgba(255,255,255,.05) !important;*/
    cursor: pointer;
    background-color: rgba(120,120,120,0.5) !important;
}

/* state-hover */
.state-hover-border-shadow:hover {
    /*background-color: rgba(255,255,255,.05) !important;*/
    cursor: pointer;
    background-color: rgba(200,200,200,1) !important;
    -webkit-box-shadow: 0 0 10px 3.5px #787878;
    -moz-box-shadow: 0 0 10px 3.5px #787878;
    box-shadow: 0 0 10px 3.5px #787878;
}

.state-hover-shadow:hover {
    cursor: pointer;
    -webkit-box-shadow: 0 0 10px -0.5px #000000;
    -moz-box-shadow: 0 0 10px -0.5px #000000;
    box-shadow: 0 0 10px -0.5px #000000;
}

.state-hover-noclick:hover {
    background-color: rgba(150,150,150,1) !important;
}

.state-hover2:hover {
    /*background-color: rgba(255,255,255,.05) !important;*/
    cursor: pointer;
    background-color: rgba(100,100,100,1) !important;
}

.state-hover-border:hover {
    /*background-color: rgba(255,255,255,.05) !important;*/
    cursor: pointer;
    border-color: gray !important;
}

/* Arborescence treeview */
.dx-ctrltreeview.dx-collection.dx-treeview {
    padding-left: 5px !important;
}

.dx-ctrltreeview .dx-icon {
    margin-right: 10px !important;
}

.dx-ctrltreeview .dx-checkbox {
    display: none;
}

.dx-ctrltreeview .dx-treeview-node {
    padding-left: 16px;
}

.dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened {
    left: -3px;
}

.dx-ctrltreeview .dx-treeview-item-with-checkbox .dx-treeview-item {
    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 0;
}
/* FIN Arborescence treeview */
/* warning forme */
.dxwarningformtext {
    font-style: italic;
    opacity: 0.7;
    padding: 0 4px;
}
/* FIN warning forme */
/* Titre entete colonne form */
.dx-field-item-label-text {
    opacity: 0.45;
}
/* FIN Titre entete colonne form */
/* Hide chevron dxaccordion */
.dx-accordion-hide-chevron:before {
    content: "";
}

.dx-accordion-hide-chevron .dx-accordion-item-opened > .dx-accordion-item-title:before {
    content: "";
}

.dx-accordion-hide-chevron .dx-accordion-item-title:before {
    content: "";
}

.dx-accordion-hide-chevron .dx-accordion-item-title:before {
    content: "";
}

.dx-accordion-sans_padding .dx-accordion-item-opened {
    margin: 0
}

.dx-accordion-item-sans_padding .dx-accordion-item-body {
    padding: 0
}

.dx-accordion-item-title {
    height: 48px
}

/* button grille ligne */
.dx-button-grille-ligne {
    width: 22px;
    min-width: 22px !important;
    height: 22px !important;
}

    .dx-button-grille-ligne .dx-button-content {
        background-color: var(--couleur-fond-bt-lig-grille)
    }

    .dx-button-grille-ligne .dx-icon {
        font-size: 12px !important;
    }
/* Fin button grille ligne */

/* class table customgrid */
.tablecustomgrid > * {
    white-space: nowrap !important;
    overflow-x: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}
/* dxctrlmenu */
.dxctrlmenu .dx-list-item-content {
    padding: 9px 16px;
}
/* REMOVE CADRE DROPDOWN BUTTON */
.dx-button-mode-outlined {
    border: none;
}

/* FLIP */
.cardcontainer {
    perspective: 1000px;
}

.card {
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
}

    .card.is-flipped {
        transform: rotateY(180deg);
    }

.carda, .cardb {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.cardb {
    transform: rotateY(180deg);
}
/* FIN FLIP */
/* JAUGE RONDE */
.loadjauge-wrapp {
    /*float: left;*/
    /*width: 100px;
    height: 100px;*/
    /*margin: 0 10px 10px 0;*/
    padding: 0;
    /*border-radius: 5px;*/
    text-align: center;
    /*background-color:red;*/
}

    .loadjauge-wrapp p {
        padding: 0 0 20px;
    }

    .loadjauge-wrapp:last-child {
        margin-right: 0;
    }

.loadjauge-9 .spinnerjauge {
    animation: loadingjaugeI 1.5s linear infinite;
}

.loadjauge-9 .bubblejauge-1, .loadjauge-9 .bubblejauge-2 {
    animation: bouncejauge 2s ease-in-out infinite;
}

.loadjauge-9 .bubblejauge-2 {
    animation-delay: -1.0s;
}

.loadjauge-3 .linejauge:nth-last-child(1) {
    animation: loadingjaugeC .6s .1s linear infinite;
}

.loadjauge-3 .linejauge:nth-last-child(2) {
    animation: loadingjaugeC .6s .2s linear infinite;
}

.loadjauge-3 .linejauge:nth-last-child(3) {
    animation: loadingjaugeC .6s .3s linear infinite;
}

.spinnerjauge {
    position: relative;
    width: 45px;
    height: 45px;
    margin: 0 auto;
}

.bubblejauge-1, .bubblejauge-2 {
    position: absolute;
    top: 0;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #bf9984;
}

.bubblejauge-2 {
    top: auto;
    bottom: 0;
}
/* FIN JAUGE RONDE */
/* JAUGE CARRE */
.loader {
    display: inline-block;
    width: 70px;
    height: 70px;
    position: relative;
    border: 4px solid black;
    top: 50%;
    animation: loader 2s infinite ease;
}

.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: black;
    animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }

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

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(360deg);
    }

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

@keyframes loader-inner {
    0% {
        height: 0%;
    }

    25% {
        height: 0%;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}
/* FIN JAUGE CARRE */
/* JAUGE CARRE TOURNE */
.loadercarretourne {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
}

@keyframes loader {
    0% {
        left: -100px;
    }

    100% {
        left: 110%;
    }
}

.boxcarretourne {
    width: 50px !important;
    height: 50px !important;
    animation: animate .5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
}

@keyframes animate {
    17% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1,.9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

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

.shadowcarretourne {
    width: 50px;
    height: 5px;
    background: #000;
    opacity: 0.1;
    position: absolute;
    top: 59px;
    left: 0;
    border-radius: 50%;
    animation: shadow .5s linear infinite;
}

@keyframes shadowcarretourne {
    50% {
        transform: scale(1.2,1);
    }
}
/* FOND JAUGE CARRE TOURNE  */
/* JAUGE MULTI CARRE */
.loadermulticarre {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-gap: 2px;
    /*width: 100px !important;
    height: 100px !important;*/
}

    .loadermulticarre > div {
        position: relative;
        width: 100%;
        height: 100%;
        transform: scale(0);
        transform-origin: center center;
        animation: loadermulticarre 2s infinite linear;
    }

        .loadermulticarre > div:nth-of-type(1), .loadermulticarre > div:nth-of-type(5), .loadermulticarre > div:nth-of-type(9) {
            animation-delay: 0.4s;
        }

        .loadermulticarre > div:nth-of-type(4), .loadermulticarre > div:nth-of-type(8) {
            animation-delay: 0.2s;
        }

        .loadermulticarre > div:nth-of-type(2), .loadermulticarre > div:nth-of-type(6) {
            animation-delay: 0.6s;
        }

        .loadermulticarre > div:nth-of-type(3) {
            animation-delay: 0.8s;
        }

@keyframes loadermulticarre {
    0% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }

    80% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}
/* FIN JAUGE MULTI CARRE */
/* JAUGE DOUBLE ROND */
.loaderdoublerond {
    position: absolute;
    top: calc(50% - 110px);
    left: calc(50% - 110px);
    padding-left: 1em;
    padding-right: 1em;
    margin: auto;
    display: block;
    width: 195px;
}

.cssload-loader {
    width: 49px !important;
    height: 49px !important;
    border-radius: 50%;
    margin: 3em;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.cssload-loader {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    margin: 3em;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

    .cssload-loader, .cssload-loader:before, .cssload-loader:after {
        animation: 1.15s infinite ease-in-out;
        -o-animation: 1.15s infinite ease-in-out;
        -ms-animation: 1.15s infinite ease-in-out;
        -webkit-animation: 1.15s infinite ease-in-out;
        -moz-animation: 1.15s infinite ease-in-out;
    }

        .cssload-loader:before, .cssload-loader:after {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .cssload-loader:before, .cssload-loader:after {
            content: "";
        }

.cssload-loader {
    animation: cssload-animation1 1.15s infinite linear;
    -o-animation: cssload-animation1 1.15s infinite linear;
    -ms-animation: cssload-animation1 1.15s infinite linear;
    -webkit-animation: cssload-animation1 1.15s infinite linear;
    -moz-animation: cssload-animation1 1.15s infinite linear;
}

    .cssload-loader:before, .cssload-loader:after {
        content: "";
        width: 80%;
        height: 80%;
        background-color: rgb(51,51,51);
        top: 5%;
    }

    .cssload-loader:before {
        left: -5%;
        animation: cssload-animation2 1.15s infinite alternate ease-in-out;
        -o-animation: cssload-animation2 1.15s infinite alternate ease-in-out;
        -ms-animation: cssload-animation2 1.15s infinite alternate ease-in-out;
        -webkit-animation: cssload-animation2 1.15s infinite alternate ease-in-out;
        -moz-animation: cssload-animation2 1.15s infinite alternate ease-in-out;
        transform-origin: 10% 50%;
        -o-transform-origin: 10% 50%;
        -ms-transform-origin: 10% 50%;
        -webkit-transform-origin: 10% 50%;
        -moz-transform-origin: 10% 50%;
    }

    .cssload-loader:after {
        left: auto;
        right: -5%;
        animation: cssload-animation2 1.15s 1.15s infinite alternate ease-in-out;
        -o-animation: cssload-animation2 1.15s 1.15s infinite alternate ease-in-out;
        -ms-animation: cssload-animation2 1.15s 1.15s infinite alternate ease-in-out;
        -webkit-animation: cssload-animation2 1.15s 1.15s infinite alternate ease-in-out;
        -moz-animation: cssload-animation2 1.15s 1.15s infinite alternate ease-in-out;
        transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform-origin: 90% 50%;
    }

@keyframes cssload-animation1 {
    0% {
        transform: rotate(20deg);
    }

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

@-o-keyframes cssload-animation1 {
    0% {
        -o-transform: rotate(20deg);
    }

    100% {
        -o-transform: rotate(380deg);
    }
}

@-ms-keyframes cssload-animation1 {
    0% {
        -ms-transform: rotate(20deg);
    }

    100% {
        -ms-transform: rotate(380deg);
    }
}

@-webkit-keyframes cssload-animation1 {
    0% {
        -webkit-transform: rotate(20deg);
    }

    100% {
        -webkit-transform: rotate(380deg);
    }
}

@-moz-keyframes cssload-animation1 {
    0% {
        -moz-transform: rotate(20deg);
    }

    100% {
        -moz-transform: rotate(380deg);
    }
}

@keyframes cssload-animation2 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@-o-keyframes cssload-animation2 {
    0% {
        -o-transform: scale(0);
    }

    100% {
        -o-transform: scale(1);
    }
}

@-ms-keyframes cssload-animation2 {
    0% {
        -ms-transform: scale(0);
    }

    100% {
        -ms-transform: scale(1);
    }
}

@-webkit-keyframes cssload-animation2 {
    0% {
        -webkit-transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes cssload-animation2 {
    0% {
        -moz-transform: scale(0);
    }

    100% {
        -moz-transform: scale(1);
    }
}
/* FIN JAUGE DOUBLE ROND */
/* JAUGE CLOCK */
.cssload-clock {
    position: absolute;
    top: calc(50% - 110px);
    left: calc(50% - 110px);
    border-radius: 60px;
    border: 3px solid #000;
    height: 80px !important;
    width: 80px !important;
    position: relative;
    left: 35%;
    left: calc(50% - 43px);
    left: -o-calc(50% - 43px);
    left: -ms-calc(50% - 43px);
    left: -webkit-calc(50% - 43px);
    left: -moz-calc(50% - 43px);
}

    .cssload-clock:after {
        content: "";
        position: absolute;
        background-color: #000;
        top: 2px;
        left: 48%;
        height: 38px;
        width: 4px;
        border-radius: 5px;
        transform-origin: 50% 97%;
        -o-transform-origin: 50% 97%;
        -ms-transform-origin: 50% 97%;
        -webkit-transform-origin: 50% 97%;
        -moz-transform-origin: 50% 97%;
        animation: grdAiguille 2s linear infinite;
        -o-animation: grdAiguille 2s linear infinite;
        -ms-animation: grdAiguille 2s linear infinite;
        -webkit-animation: grdAiguille 2s linear infinite;
        -moz-animation: grdAiguille 2s linear infinite;
    }

    .cssload-clock:before {
        content: "";
        position: absolute;
        background-color: #000;
        top: 6px;
        left: 48%;
        height: 35px;
        width: 4px;
        border-radius: 5px;
        transform-origin: 50% 94%;
        -o-transform-origin: 50% 94%;
        -ms-transform-origin: 50% 94%;
        -webkit-transform-origin: 50% 94%;
        -moz-transform-origin: 50% 94%;
        animation: ptAiguille 12s linear infinite;
        -o-animation: ptAiguille 12s linear infinite;
        -ms-animation: ptAiguille 12s linear infinite;
        -webkit-animation: ptAiguille 12s linear infinite;
        -moz-animation: ptAiguille 12s linear infinite;
    }

@keyframes grdAiguille {
    0% {
        transform: rotate(0deg);
    }

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

@-o-keyframes grdAiguille {
    0% {
        -o-transform: rotate(0deg);
    }

    100% {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes grdAiguille {
    0% {
        -ms-transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes grdAiguille {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes grdAiguille {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@keyframes ptAiguille {
    0% {
        transform: rotate(0deg);
    }

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

@-o-keyframes ptAiguille {
    0% {
        -o-transform: rotate(0deg);
    }

    100% {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes ptAiguille {
    0% {
        -ms-transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes ptAiguille {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes ptAiguille {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}
/* FIN JAUGE CLOCK */

.histo {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.elehisto {
    background-color: rgba(210, 210, 0, 0.2);
    padding: 4px;
    border-radius: 2px;
    font-weight: bold;
}

/* CAROUSSEL */
.cards-caroussel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .cards-caroussel .cardcaroussel {
        position: relative;
        z-index: 1;
        -webkit-transform: scale(0.6) translateY(-2rem);
        transform: scale(0.6) translateY(-2rem);
        opacity: 0;
        cursor: pointer;
        pointer-events: none;
        /*        background: #2e5266;
        background: linear-gradient(to top, #2e5266, #6e8898);*/
        transition: 1s;
    }

        .cards-caroussel .cardcaroussel:after {
            /*content: '';*/
            position: absolute;
            height: 2px;
            width: 100%;
            border-radius: 100%;
            background-color: rgba(0,0,0,0.3);
            bottom: -5rem;
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }

        .cards-caroussel .cardcaroussel:nth-child(0):before {
            /*content: '0';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel:nth-child(1):before {
            /*content: '1';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel:nth-child(2):before {
            /*content: '2';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel:nth-child(3):before {
            /*content: '3';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel:nth-child(4):before {
            /*content: '4';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel:nth-child(5):before {
            /*content: '5';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel:nth-child(6):before {
            /*content: '6';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel:nth-child(7):before {
            /*content: '7';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel:nth-child(8):before {
            /*content: '8';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel:nth-child(9):before {
            /*content: '9';*/
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            font-size: 3rem;
            font-weight: 300;
            color: #fff;
        }

        .cards-caroussel .cardcaroussel.active {
            z-index: 3;
            -webkit-transform: scale(1) translateY(0) translateX(0);
            transform: scale(1) translateY(0) translateX(0);
            opacity: 1;
            pointer-events: auto;
            transition: 1s;
        }

        .cards-caroussel .cardcaroussel.prev, .cards-caroussel .cardcaroussel.next {
            z-index: 2;
            -webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
            transform: scale(0.8) translateY(-1rem) translateX(0);
            opacity: 0.6;
            pointer-events: auto;
            transition: 1s;
        }
/* FIN CAROUSSEL */

/* CAROUSSEL CENTRAL */
.card-carousel-central {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .card-carousel-central .my-card {
        height: 20rem;
        width: 12rem;
        position: relative;
        z-index: 1;
        -webkit-transform: scale(0.8) translateY(-2rem);
        transform: scale(0.8) translateY(-2rem);
        opacity: 0.2;
        cursor: pointer;
        pointer-events: auto;
        /*        background: #2e5266;
        background: linear-gradient(to top, #2e5266, #6e8898);*/
        transition: 1s;
    }

        .card-carousel-central .my-card:after {
            content: '';
            position: absolute;
            height: 2px;
            width: 100%;
            border-radius: 100%;
            background-color: rgba(0,0,0,0.3);
            bottom: -5rem;
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }

        .card-carousel-central .my-card.active {
            z-index: 3;
            -webkit-transform: scale(1.2) translateY(0) translateX(0);
            transform: scale(1.2) translateY(0) translateX(0);
            opacity: 1;
            cursor: default;
            pointer-events: auto;
            transition: 1s;
        }

        .card-carousel-central .my-card.prev, .card-carousel-central .my-card.next {
            z-index: 2;
            -webkit-transform: scale(1) translateY(-1rem) translateX(0);
            transform: scale(1) translateY(-1rem) translateX(0);
            opacity: 0.5;
            pointer-events: auto;
            transition: 1s;
        }
/* FIN CAROUSSEL CENTRAL */

/* CHOIX TARIF */
.choixtarif {
    display: flex;
    /*        align-items: center;
    justify-content: center;*/
    position: relative;
}

    .choixtarif .my-card {
        height: 100%;
        position: relative;
        z-index: 1;
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        opacity: 0.5;
        cursor: pointer;
        pointer-events: auto;
        /*        background: #2e5266;
        background: linear-gradient(to top, #2e5266, #6e8898);*/
        transition: 0.1s;
    }

        /*        .choixtarif .my-card:hover {
            z-index: 4;
            -webkit-transform: scale(1.1) translateY(0) translateX(0);
            transform: scale(1.1) translateY(0) translateX(0);
            opacity: 1;
            cursor: default;
            pointer-events: auto;
            transition: 0.1s;
            background-color:black;
        }
*/
        /*        .choixtarif .my-card:after {
            content: '';
            position: absolute;
            height: 2px;
            width: 100%;
            border-radius: 100%;
            background-color: rgba(0,0,0,0.3);
            bottom: -5rem;
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }*/

        .choixtarif .my-card.active {
            z-index: 3;
            /*            -webkit-transform: scale(1.04) translateY(0) translateX(5px);
            transform: scale(1.04) translateY(0) translateX(5px);*/
            opacity: 1;
            cursor: default;
            pointer-events: auto;
            /*transition: 0.3s;*/
            background-color: black;
        }

        .choixtarif .my-card.prev, .card-carousel-central .my-card.next {
            /*         -webkit-transform: scale(1) translateY(0) translateX(0);
            transform: scale(1) translateY(0) translateX(0);*/
            opacity: 0.3;
            pointer-events: auto;
            /*transition: 1s;*/
        }
/* FIN CHOIX TARIF */

/** PIXIE **/
form.many-inputs {
    height: auto;
}

.cdk-overlay-pane {
    background-color: rgba(0,0,0,0.9);
}

pixie-editor .tool-panel-container .apply-button, pixie-editor .tool-panel-container .cancel-button {
    width: 95px;
}
/** FIN PIXIE **/

/** debut TUIMAGEEDITOR **/
.tui-image-editor {
    top: 0px !important;
}
/** fin TUIMAGEEDITOR **/


/* BLINK */
.blink {
    animation: blinker 0.5s linear infinite;
    font-weight: bold;
    font-size: 110%;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink05 {
    animation: blinker05 0.5s linear infinite;
    font-weight: bold;
    font-size: 110%;
}

.blink09 {
    animation: blinker09 2s linear infinite;
}

@keyframes blinker05 {
    50% {
        opacity: 0.5;
    }
}

@keyframes blinker09 {
    50% {
        opacity: 0.6;
    }
}


.blink2 {
    animation: blinker02 0.7s linear infinite;
    font-weight: bold;
    font-size: 110%;
}

@keyframes blinker02 {
    50% {
        opacity: 0.3;
    }
}

.blinkcolor {
    animation: blinkercolor 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinkercolor {
    to {
        color: red;
    }
}
/* FIN BLINK */

/** hover dxlist **/
.dxctrllist .dx-list-item {
    opacity: 0.5
}

    .dxctrllist .dx-list-item:hover {
        opacity: 1
    }
/** FIN hover dxlist **/

/* Hide popiupappointement */
/*.dx-scheduler-appointment-popup {
    display:none
}*/
/* FIN Hide popiupappointement */

.dx-switch-off {
    display: block;
    text-align: left;
    padding-left: 5px;
}

.dx-switch-on {
    padding-right: 5px;
}

/* HOVER LINk */
.hoverlink {
    cursor: pointer;
    text-decoration: none
}

    .hoverlink:hover {
        cursor: pointer;
        text-decoration: underline
    }
/* FIN HOVER LINk */

/* css dxForm */
.dxctrlform .dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
    padding-top: 0;
}


/* pour les champs de données des modeles de doc cpt */
.fielddoccpt {
    margin: 0 !important;
    cursor: default !important;
    color: black;
    /*background-color: var(--bck-color);*/
}

    .fielddoccpt::after {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bck-color);
        font-family: 'Arial';
        font-weight: bold;
        line-height: 1.5;
        text-align: center;
        content: attr(alt);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow-x: hidden;
        color: black;
    }
/*    .fielddoccpt::after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        font-family: 'Helvetica';
        font-weight: 300;
        line-height: 2;
        text-align: center;
        content: attr(alt);
    }*/


/* ellipsis multiligne */
.ellipsismultiligne1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.ellipsismultiligne2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.ellipsismultiligne3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.ellipsismultiligne4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.ellipsismultiligne5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}
/* FIN */

/* splitter resize */
.wrap {
    width: 100%;
    /*    border: 1px brown solid;
    font-size: 0;*/
}

.resizable {
    /*    width: 50%;
    height: 120px;*/
    /*padding: 0.5em;*/
    /*background-color: coral;*/
    display: inline-block;
}

.ui-resizable-e {
    cursor: e-resize;
    width: 16px;
    right: -5px;
    top: 0;
    bottom: 0;
    background-color: gray;
}

.ui-resizable {
    position: relative;
}

.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
    display: none;
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}
/* FIN */

/* on descend d'un cran le sortable */
.dx-sortable-dragging.dx-sortable-clone {
    z-index: 2147483646
}

.dx-sortable-placeholder {
    z-index: 2147483646
}


/* LETTRINE */
.lettrine {
    /*    width: 150px;
    border: 1px solid #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;*/
}

    .lettrine:first-letter {
        /*border: 1px solid red;*/
        /*font-family: Times New Roman, Times, serif;*/
        font-size: 500%;
        /*color: red;*/
        /*padding: 5px 30px 20px 0;*/
        margin-right: 5px;
        float: left;
        opacity: 0.8;
    }

/* PERMET DE GERE UN TEXTBOX en PASSWORD*/
.txtPassword {
    font-family: "text-security-disc" !important;
    -webkit-text-security: disc;
}
/* CSS SECURITY PASSWORD */
@font-face {
    font-family: 'text-security-circle';
    src: url('text-security-circle.eot');
    src: url('text-security-circle.eot?#iefix') format('embedded-opentype'), url('text-security-circle.woff2') format('woff2'), url('text-security-circle.woff') format('woff'), url('text-security-circle.ttf') format('truetype'), url('text-security-circle.svg#text-security') format('svg');
}

@font-face {
    font-family: 'text-security-square';
    src: url('text-security-square.eot');
    src: url('text-security-square.eot?#iefix') format('embedded-opentype'), url('text-security-square.woff2') format('woff2'), url('text-security-square.woff') format('woff'), url('text-security-square.ttf') format('truetype'), url('text-security-square.svg#text-security') format('svg');
}

@font-face {
    font-family: 'text-security-disc';
    src: url('text-security-disc.eot');
    src: url('text-security-disc.eot?#iefix') format('embedded-opentype'), url('text-security-disc.woff2') format('woff2'), url('text-security-disc.woff') format('woff'), url('text-security-disc.ttf') format('truetype'), url('text-security-disc.svg#text-security') format('svg');
}
/* FIN CSS SECURITY PASSWORD */


/* tinymce adaptation theme */
.tox-tinymce {
    border: none !important;
    border-radius: 0 !important;
}

.tox.tox-tinymce-aux {
    z-index: 100000000;
}
/* FIN tinymce adaptation theme */

/* remove shadow form */
.formpopup.dx-popup-wrapper > .dx-overlay-content {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* style sortable inlineblock */
ul.dxctrl-sortable {
    margin: 0;
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none;
    clear: both;
}

.dxctrl-sortable li {
    display: block;
    float: left;
    list-style-type: none;
    clear: none;
    width: 80px;
    height: 97px;
    margin: 5px;
}


/* EFFET GLITCH NOISE */

/* GLITCH TRANSF */
.glitch_transf-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.glitch_transf {
    position: relative;
    color: #fff;
    animation: shift 4s ease-in-out infinite alternate;
    transform: skewX(0deg);
    z-index: 1;
}
/* FIN GLITCH TRANSF */

/* GLITCH NOISE */
.glitch_noise-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.glitch_noise {
    position: relative;
    color: #fff;
    z-index: 1;
}

    .glitch_noise:before {
        content: attr(data-glitch);
        position: absolute;
        top: 0;
        left: -2px;
        width: 100%;
        color: #fff;
        background-color: #222;
        overflow: hidden;
        clip: rect(0, 900px, 0, 0);
        animation: noise-before 3s infinite linear alternate-reverse;
    }

    .glitch_noise:after {
        content: attr(data-glitch);
        position: absolute;
        top: 0;
        left: 2px;
        width: 100%;
        color: #fff;
        background-color: #222;
        overflow: hidden;
        clip: rect(0, 900px, 0, 0);
        animation: noise-after 2s infinite linear alternate-reverse;
    }
/* FIN GLITCH NOISE */

/* GLITCH COLOR */
.glitch_color-wrapper {
    /*    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;*/
}

.glitch_color {
    /*    position: relative;
    color: #fff;
    z-index: 1;*/
}

    .glitch_color:before,
    .glitch_color:after {
        display: block;
        content: attr(data-glitch);
        position: absolute;
        top: 0;
        /*left: 0;*/
        opacity: 0.8;
    }

    .glitch_color:before {
        animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        color: #00ffff;
        z-index: -1;
    }

    .glitch_color:after {
        animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        color: #ff00ff;
        z-index: -2;
    }
/* FIN GLITCH COLOR */

/* GLITCH ALL */
.glitch_all-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.glitch_all {
    position: relative;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 5px;
    animation: shift 4s ease-in-out 1 alternate;
    z-index: 1;
}

    .glitch_all:before {
        content: attr(data-glitch);
        position: absolute;
        top: 0;
        left: -2px;
        text-shadow: -1px 0 #0ff;
        width: 100%;
        color: #fff;
        overflow: hidden;
        clip: rect(0, 900px, 0, 0);
        animation: noise-before 3s 1 linear alternate-reverse;
    }

    .glitch_all:after {
        content: attr(data-glitch);
        position: absolute;
        top: 0;
        left: 2px;
        text-shadow: 1px 0 #ff00ff;
        width: 100%;
        color: #fff;
        overflow: hidden;
        clip: rect(0, 900px, 0, 0);
        animation: noise-after 2s 1 linear alternate-reverse;
    }
/* FIN GLITCH ALL */

@keyframes noise-before {
    0% {
        clip: rect(61px, 9999px, 52px, 0);
    }

    5% {
        clip: rect(33px, 9999px, 144px, 0);
    }

    10% {
        clip: rect(121px, 9999px, 115px, 0);
    }

    15% {
        clip: rect(144px, 9999px, 162px, 0);
    }

    20% {
        clip: rect(62px, 9999px, 180px, 0);
    }

    25% {
        clip: rect(34px, 9999px, 42px, 0);
    }

    30% {
        clip: rect(147px, 9999px, 179px, 0);
    }

    35% {
        clip: rect(99px, 9999px, 63px, 0);
    }

    40% {
        clip: rect(188px, 9999px, 122px, 0);
    }

    45% {
        clip: rect(154px, 9999px, 14px, 0);
    }

    50% {
        clip: rect(63px, 9999px, 37px, 0);
    }

    55% {
        clip: rect(161px, 9999px, 147px, 0);
    }

    60% {
        clip: rect(109px, 9999px, 175px, 0);
    }

    65% {
        clip: rect(157px, 9999px, 88px, 0);
    }

    70% {
        clip: rect(173px, 9999px, 131px, 0);
    }

    75% {
        clip: rect(62px, 9999px, 70px, 0);
    }

    80% {
        clip: rect(24px, 9999px, 153px, 0);
    }

    85% {
        clip: rect(138px, 9999px, 40px, 0);
    }

    90% {
        clip: rect(79px, 9999px, 136px, 0);
    }

    95% {
        clip: rect(25px, 9999px, 34px, 0);
    }

    100% {
        clip: rect(173px, 9999px, 166px, 0);
    }
}

@keyframes noise-after {
    0% {
        clip: rect(26px, 9999px, 33px, 0);
    }

    5% {
        clip: rect(140px, 9999px, 198px, 0);
    }

    10% {
        clip: rect(184px, 9999px, 89px, 0);
    }

    15% {
        clip: rect(121px, 9999px, 6px, 0);
    }

    20% {
        clip: rect(181px, 9999px, 99px, 0);
    }

    25% {
        clip: rect(154px, 9999px, 133px, 0);
    }

    30% {
        clip: rect(134px, 9999px, 169px, 0);
    }

    35% {
        clip: rect(26px, 9999px, 187px, 0);
    }

    40% {
        clip: rect(147px, 9999px, 137px, 0);
    }

    45% {
        clip: rect(31px, 9999px, 52px, 0);
    }

    50% {
        clip: rect(191px, 9999px, 109px, 0);
    }

    55% {
        clip: rect(74px, 9999px, 54px, 0);
    }

    60% {
        clip: rect(145px, 9999px, 75px, 0);
    }

    65% {
        clip: rect(153px, 9999px, 198px, 0);
    }

    70% {
        clip: rect(99px, 9999px, 136px, 0);
    }

    75% {
        clip: rect(118px, 9999px, 192px, 0);
    }

    80% {
        clip: rect(1px, 9999px, 83px, 0);
    }

    85% {
        clip: rect(145px, 9999px, 98px, 0);
    }

    90% {
        clip: rect(121px, 9999px, 154px, 0);
    }

    95% {
        clip: rect(156px, 9999px, 44px, 0);
    }

    100% {
        clip: rect(67px, 9999px, 122px, 0);
    }
}

@keyframes shift {
    0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
        transform: skewX(0deg);
    }

    41% {
        transform: skewX(10deg);
    }

    42% {
        transform: skewX(-10deg);
    }

    59% {
        transform: skewX(40deg) skewY(10deg);
    }

    60% {
        transform: skewX(-40deg) skewY(-10deg);
    }

    63% {
        transform: skewX(10deg) skewY(-5deg);
    }

    70% {
        transform: skewX(-50deg) skewY(-20deg);
    }

    71% {
        transform: skewX(10deg) skewY(-10deg);
    }
}

@keyframes glitch-color {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-3px, 3px);
    }

    40% {
        transform: translate(-3px, -3px);
    }

    60% {
        transform: translate(3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    to {
        transform: translate(0);
    }
}
/* FIN EFFET GLITCH */

/* affiche en rouge les label de saisie */
.saisie_obligatoire .dx-texteditor-label {
    color: red
}


/* BLINK SCALE */
.blinkscale {
    animation: blinkscale;
    animation-duration: 1s;
    animation-iteration-count: 2
}

@keyframes blinkscale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


.blinkscalealways {
    animation: blinkscalealways;
    animation-duration: 1s;
    animation-iteration-count: infinite
}

@keyframes blinkscalealways {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


.blinkscalealwaysbig {
    animation: blinkscalealwaysbig;
    animation-duration: 1s;
    animation-iteration-count: infinite
}

@keyframes blinkscalealwaysbig {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.texture_drag_construct_email {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, rgba(0, 0, 0, 0.17) 32px, rgba(0, 0, 0, 0.17) 64px);
    background-color: rgba(255, 255, 255, 0);
}

.texture_import_disable {
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 3px, transparent 0, transparent 50%);
    background-size: 10px 10px;
    background-color: transparent;
}

.texture_import_disable_projet_pipeline {
    background-image: repeating-linear-gradient(45deg, rgba(128,128,128,0.3) 0, rgba(128,128,128,0.3) 3px, transparent 0, transparent 50%);
    background-size: 10px 10px;
    background-color: transparent;
}

.texture_corbeille {
    background-image: repeating-linear-gradient(45deg, rgba(128,128,128,0.1) 0, rgba(128,128,128,0.2) 3px, transparent 0, transparent 50%);
    background-size: 10px 10px;
    background-color: transparent;
}

AGENDA
Pour afficher timeline sans scroll horizonthal
.dx-scheduler-cell-sizes-horizontal {
    width: auto !important;
}

.texture_rdv_planiti {
    background: linear-gradient(135deg,rgba(0, 0, 0, 0.3) 18.75%,rgba(0, 0, 0, 0) 0 31.25%,rgba(0, 0, 0, 0.3) 0), repeating-linear-gradient(45deg,rgba(0, 0, 0, 0) -6.25% 6.25%,rgba(0, 0, 0, 0.3) 0 18.75%);
    background-size: 64px 64px;
}

/* MEDIA QUERY PLANITI */
/*@media only screen and (max-width: 640px) {*/
/*For mobile phones: */
/*.coldetailplaniti, .coldateplaniti {
        width: 100%;
    }
}*/
/* FIN MEDIA QUERY PLANITI */



/* JAUGE IA */
.spinneria {
    position: relative;
    width: 33.6px;
    height: 33.6px;
    perspective: 67.2px;
}

    .spinneria div {
        width: 100%;
        height: 100%;
        background: #474bff;
        position: absolute;
        left: 50%;
        transform-origin: left;
        animation: spinneria-16s03x 2s infinite;
    }

        .spinneria div:nth-child(1) {
            animation-delay: 0.15s;
        }

        .spinneria div:nth-child(2) {
            animation-delay: 0.3s;
        }

        .spinneria div:nth-child(3) {
            animation-delay: 0.45s;
        }

        .spinneria div:nth-child(4) {
            animation-delay: 0.6s;
        }

        .spinneria div:nth-child(5) {
            animation-delay: 0.75s;
        }

@keyframes spinneria-16s03x {
    0% {
        transform: rotateY(0deg);
    }

    50%, 80% {
        transform: rotateY(-180deg);
    }

    90%, 100% {
        opacity: 0;
        transform: rotateY(-180deg);
    }
}
/* FIN JAUGE dialog */

/* fiche */
.fichestrcon_stattd_detail {
    width: 20px;
    padding: 0 3px;
    height: 20px;
    text-align: center;
}

.fichestrcon_stattd_ligne {
    width: 18px;
    padding: 0 3px;
    height: 18px;
}


/* LEAFLET CARTO */
.leaflet-draw-toolbar a {
    background-image: none !important;
    font-size: 18px;
    text-align: center;
    line-height: 26px;
}

.leaflet-draw-draw-circle::after {
    content: "⚪";
}


/* Tous les dxPopup dont le wrapper a la classe .popup-fullscreen sur mobile */
.popup-fullscreen-mobile .dx-overlay-content {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--vhpx, 100vh) !important; /* pilotée par JS global */
    max-height: none !important;
    border-radius: 0 !important;
}

.popup-fullscreen-mobile .dx-popup-content {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-top: env(safe-area-inset-top, 0px);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.popup-fullscreen-mobile .dx-popup-title {
    position: sticky;
    top: 0;
}