/* Login background image */
.x-login-background {
    background-repeat: no-repeat;
    background-position: top left;
    background-attachment: fixed;
    background-size: cover;
}
/* Login logo image */
.x-login-logo {
    position: absolute;
    top: 20%;
    left: 7%;
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}
@media only screen and (max-width: 399px) {
    .x-login-logo {
        left: 50px;
        width: 250px;
        height: 250px;
    }
}
@media only screen and (max-width: 299px) {
    .x-login-logo {
        left: 10px;
    }
}
/* Loading progression messages */
.x-login-loading {
    background-color: rgba(20, 60, 130, 0.7);
    border: 2px solid rgba(20, 60, 130);
    color: white;
    padding: 10px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    vertical-align: middle;
    line-height: 9px;
}
.x-login-loading img {
    height: 32px;
    width: 32px;
}
.x-login-loading span {
    margin: 0 10px;
}
.x-login-loading-text {
    float: left;
    padding: 9px 10px 0 10px;
    line-height: 14px;
    font-size: 14px;
}
/* Reload app */
.x-login-reload {
    position: absolute;
    width: 100%;
    top: 40%;
}
.x-login-reload-text {
    /* Si display: table; pose prolème, utiliser display: block; text-align: center;*/
    display: table;
    margin: 20px auto;
    font-size: 15pt;
}

/* Forme de login plus corporate */
.x-splash-form, .x-splash-form .x-window-body,
.x-splash-form, .x-splash-form .x-panel-body,
.x-splash-form, .x-splash-form .x-login-form-mfa-desc .x-form-textarea {
    background-color: transparent;
}
.x-splash-form.x-window-default {
    border-color: rgba(20, 60, 130, 0.7);
    border-width: 2px;
    border-radius: 10px;
    padding: 0; /* Pour SolvaSkins */
    -webkit-box-shadow: none; /* Pour SolvaSkins */
    -moz-box-shadow: none; /* Pour SolvaSkins */
    box-shadow: none; /* Pour SolvaSkins */
}

.x-splash-form .x-panel-body-default {
    border-width: 0 !important; /* Pour SolvaSkins */
}

.x-splash-form .x-splash-form-panel .x-panel-body {
    background-color: rgba(20, 60, 130, 0.7);
    color: white;
}
.x-splash-form .x-form-item-label-default {
    color: white;
}
.x-splash-form .x-login-form-mfa-desc .x-form-textarea {
    color: white !important;
}
.x-splash-form .x-login-form-mfa-qrcode {
    background-color: white;
    border-radius: 5px;
    border: solid white;
}
.x-splash-form .x-form-error-msg {
    background-color: rgba(255, 255, 255, .7);
    border-radius: 3px;
}

.x-splash-form .x-form-text {
    background-image: none; /* Pour SolvaSkins */
}
.x-splash-form .x-form-text.x-field-form-focus,
.x-splash-form .x-form-text.x-form-invalid-field.x-field-form-focus {
    background-color: white; /* Pour SolvaSkins */
}
.x-splash-form .x-form-text-wrap-default {
    border-color: transparent !important; /* Pour SolvaSkins */
}
.x-splash-form .x-form-trigger-wrap-default {
    border-color: transparent !important;
}

.x-splash-form label,
.x-splash-form .x-btn-inner-default-small {
    font-size: 13px;
}

.x-splash-form .x-btn-default-small,
.x-keyboard-mode .x-splash-form .x-btn-default-small,
.x-keyboard-mode .x-splash-form .x-btn-default-small.x-btn-over {
    background-image: none !important; /* Pour SolvaSkins */
    background-color: #c30028 !important;
    border-color: #c30028 !important;
}
.x-keyboard-mode .x-splash-form .x-btn-default-small.x-btn-focus {
    background-image: none !important; /* Pour SolvaSkins */
    background-color: #d83253 !important;
}
.x-splash-form .x-btn-default-small .x-btn-inner-default-small,
.x-keyboard-mode .x-splash-form .x-btn-default-small .x-btn-inner-default-small {
        color: white !important;
}
.x-splash-form .x-btn-inner-default-small {
    padding: 4px 5px;
}

/* Correct bug in 4.1b3 (lookup tout bleu tout vide). Toujours nécessaire en 4.2.0 */
/*EXTJS6: à tester
.x-panel-body {
    height: 100%;
}
.x-window-body {
    height: 100%;
}
*/

/* Avec ExtJS 6.5, la font prime sur notre style dynamique. On doit donc désactiver la règle définie dans le skin
   font: normal[...] en définissant font: inherit; puis en reprennant les valeurs nécessaires. */
body:not(.wx-theme-font) .x-toolbar-text-default,
body:not(.wx-theme-font) .x-toolbar-text-footer,
body:not(.wx-theme-font) .x-form-invalid-under-default,
body:not(.wx-theme-font) .x-btn-inner-default-small,
body:not(.wx-theme-font) .x-btn-inner-default-medium,
body:not(.wx-theme-font) .x-btn-inner-default-large,
body:not(.wx-theme-font) .x-btn-inner-default-toolbar-small,
body:not(.wx-theme-font) .x-btn-inner-default-toolbar-medium,
body:not(.wx-theme-font) .x-btn-inner-default-toolbar-large  {
    font: inherit;
    font-size: 11px;
    line-height: 16px;
}
/* Désactivationm du min-height qui pose problème avec les boutons peu haut (ex: ... dans PC_USER) */
.x-btn-button-default-small {
    min-height: unset;
}

/* Le bold du titre  */
.x-toolbar-text-default.x-window-header-title-default {
    font-weight: bold;
}

/* Homogénéisation entre les skins */
body:not(.wx-theme-font) .x-form-text-default.x-form-textarea {
    line-height: 16px;
}

/* Le skin ne doit pas imposer une hauteur minimale, c'est le design Delphi qui doit primer */
body:not(.wx-theme-font) .x-form-text-default.x-form-textarea {
    min-height: unset;
}

/*EXTJS6: bug ? le textarea de la MessageForm ne s'agrandit pas en hauteur */
.x-form-text-heighted .x-form-textarea-body .x-form-trigger-wrap .x-form-text-wrap,
.x-form-text-heighted .x-form-textarea-body .x-form-trigger-wrap .x-form-text-wrap-noborder {
    height: 100%;
}
/*EXTJS6: bug ? le textarea de la MessageForm ne s'agrandit pas en largeur dans Firefox */
/* utiliser x-form-type-text au lieu de x-form-text-heighted si nécessaire ailleurs */
.x-form-text-heighted .x-form-textarea-body .x-form-trigger-wrap .x-form-text-wrap,
.x-form-text-heighted .x-form-textarea-body .x-form-trigger-wrap .x-form-text-wrap-noborder {
    width: 100%;
}

/* Suppression de la bordure lorsque la forme est en "fulltab" */
.x-window-full {
    padding: 0px;
    border-width: 0px;
}

/* Alignement d'éléments centrés (pour l'instant le panel des boutons de la messagebox) */
.x-box-item-center {
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    left: 0 !important;
}

/* Marge de 2px sous les grids (sauf dans les lookup), etc. et fermeture de la toolbar verticale en bas */
.x-control-container {
    margin-bottom: 2px;
}
.x-control-container .x-toolbar-vertical {
    border-bottom-width: 1px !important;
}
.x-lookup .x-control-container {
    margin-bottom: 0px;
}

/* Fond couleur skin dans les grids vides (scheduler planning) */
.x-grid-scroll-container {
    background-color: transparent;
}
.x-grid-scrollbar-clipper > .x-grid-view, .x-grid-scrollbar-clipper > .x-tree-view {
    background-color: transparent;
}

/* Fond couleur skin dans les cellules de tree */
.x-tree-panel .x-grid-cell {
    background-color: transparent;
}
.x-tree-icon-24 {
    width: 24px;
    height: 24px;
}
.x-tree-view:not(.x-group-view) .x-grid-item:not(.x-grid-item-over):not(.x-grid-item-selected) {
    background-color: transparent;
}

/* Dessine une frame en traitillés quand le grid est vide et qu'il a le focus
   Inspiré de .x-keyboard-mode .x-grid-item-focused .x-grid-cell-inner:before
*/
.x-list-view-focus:not(.x-listTexts-view).x-list-view-empty:before,
.x-tree-view-focus.x-tree-view-empty:before,
.x-grid-view-focus.x-grid-view-empty:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
    pointer-events: none;
    border: 1px dotted #464646;
}

/* Pas de traitillés autour de la cellule sélectionnée (mais autour de la ligne complète) */
.x-keyboard-mode .x-grid-view .x-grid-item-focused .x-grid-cell-inner:before,
.x-keyboard-mode .x-tree-view .x-grid-item-focused .x-grid-cell-inner:before {
    display: none;
}

/* Traitillés autour de la ligne sélectionnée au lieu de la cellule pour les "no-row-lines".
   Couleurs redéfinies par skin. */
.x-grid-no-row-lines .x-grid-view .x-grid-item-selected .x-grid-row:after,
.x-grid-no-row-lines .x-tree-view .x-grid-item-selected .x-grid-row:after {
    content: "";
    position: absolute;
    /* z-index: -1; désactivé sinon le background de la cellule sélectionnée passe par dessus les traitillés */
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    border: 1px dotted #969696;
}
/* Suppression de la bordure verticale de sélection entre les deux vue d'un tree/grid avec colonnes lockées, pour ne
   garder que le contour extérieur. */
.x-grid-locked .x-grid-no-row-lines .x-grid-view.x-locked-view .x-grid-item-selected .x-grid-row:after,
.x-grid-locked .x-grid-no-row-lines .x-tree-view.x-locked-view .x-grid-item-selected .x-grid-row:after {
    border-right-width: 0px;
}
.x-grid-locked .x-grid-no-row-lines .x-grid-view.x-normal-view .x-grid-item-selected .x-grid-row:after,
.x-grid-locked .x-grid-no-row-lines .x-tree-view.x-normal-view .x-grid-item-selected .x-grid-row:after {
    border-left-width: 0px;
}

.x-grid-no-row-lines .x-grid-view-focus .x-grid-item-selected .x-grid-row:after,
.x-grid-no-row-lines .x-tree-view-focus .x-grid-item-selected .x-grid-row:after {
    border-color: #464646;
}

/* Traitillés autour de la ligne sélectionnée au lieu de la cellule pour les "with-row-lines".
   Couleurs définies par skin. */
.x-grid-with-row-lines .x-grid-item.x-grid-item-selected {
    border-style: dotted; /* Certains skin comme Crisp le définissent en solid */
    border-color: #969696;
}
.x-grid-with-row-lines .x-grid-item-selected + .x-grid-item {
    border-top-style: dotted; /* Certains skin comme Crisp le définissent en solid */
    border-top-color: #969696;
}
.x-grid-with-row-lines .x-grid-item-selected .x-grid-cell.x-grid-cell-last {
    border-right-style: dotted; /* Certains skin comme Crisp le définissent en solid */
    border-right-color: #969696;
}
.x-grid-with-row-lines .x-grid-cell.x-grid-cell-first {
    /* Réservation de l'espace pour la frame de sélection */
    border-left-width: 1px;
    border-left-color: transparent;
}
.x-grid-locked .x-grid-with-row-lines .x-normal-view .x-grid-cell.x-grid-cell-first {
    /* Pas de ligne pour la frame de sélection à la frontière entre les deux vues d'un grid avec colonnes lockées */
    border-left-width: 0px;
}
.x-grid-with-row-lines:not(.x-grid-with-col-lines) .x-grid-cell.x-grid-cell-last {
    /* Réservation de l'espace pour la frame de sélection */
    border-right-width: 1px;
    border-right-color: transparent;
}
.x-grid-locked .x-grid-with-row-lines:not(.x-grid-with-col-lines) .x-locked-view .x-grid-cell.x-grid-cell-last {
    /* Pas de ligne pour la frame de sélection à la frontière entre les deux vues d'un grid avec colonnes lockées */
    border-right-width: 0px;
}
.x-grid-with-row-lines .x-grid-item-selected .x-grid-cell.x-grid-cell-first {
    border-left-style: dotted;
    border-left-color: #969696;
}
.x-grid-with-row-lines:not(.x-grid-with-col-lines) .x-grid-item-selected .x-grid-cell.x-grid-cell-last {
    border-right-style: dotted;
    border-right-color: #969696;
}
.x-grid-with-col-lines .x-grid-item-selected .x-grid-cell:not(.x-grid-cell-last) {
    /* Pas de traitillés verticaux entre les cellules */
    border-right-style: solid;
}
/* Couleur par défaut pour le focus (plus foncé) */
.x-grid-with-row-lines .x-focus .x-grid-item-selected .x-grid-cell.x-grid-cell-first {
    border-left-color: #464646;
}
.x-grid-with-row-lines .x-focus .x-grid-item-selected .x-grid-cell.x-grid-cell-last {
    border-right-color: #464646;
}
.x-grid-with-row-lines .x-focus .x-grid-item.x-grid-item-selected {
    border-color: #464646;
}
.x-grid-with-row-lines .x-focus .x-grid-item-selected + .x-grid-item {
    border-top-color: #464646;
}

/*Déplacer la couleur dans le parent pour que la couleur du focus soit affichée*/
.x-html-editor-wrap textarea {
    background-color: transparent;
}
.x-html-editor-input {
    background-color: white;
}

/*.x-ribbon-default {
    height: 117px;
}
*/

/* Déjà géré en natif avec Extjs 6.5 mais disparait souvent ? (s'affiche avec les flèches, disparaît avec la souris)
   Provoque un déplacement du texte de 1px si on ne définit pas la bordure transparente par défaut. */
/* -> remplacé par Form.bodyCls = 'x-keyboard-mode' pour activer la mise en évidence en permanence */
/* .x-tab-wrap {
    border-width: 1px;
    border-style: dotted;
    border-color: transparent;
}
.x-tab-focus .x-tab-wrap {
    / * border-width: 1px;
    border-style: dotted; * /
    border-color: inherit;
} */

/* Focus identique à .x-grid-item-focused .x-grid-cell-inner:before */
.x-list-view:not(.x-listTexts-view) .x-view-item-focused:not(.x-talk-item) {
    outline: 1px dotted #464646 !important;
    /*outline-offset: 2px;*/
}

/* Désactivation de la frame de focus dont l'affichage est provoqué par l'ajout de Form.bodyCls = 'x-keyboard-mode'
   ci-dessus, uniquement pour le talk.
   TODO: revoir couleur selon thème*/
.x-window-body.x-keyboard-mode .x-view-item-focused.x-talk-item{
    outline: inherit !important;
    outline-offset: inherit;
}
.x-body.x-keyboard-mode .x-view-item-focused.x-talk-item{
    outline: 1px dashed #dfdfdf !important;
    outline-offset: -1px;
}
/* Pas de frame de focus dans le ribbon */
.x-keyboard-mode .x-btn-focus.x-btn-default-toolbar-medium .x-btn-wrap {
    outline: inherit;
}

/* Marge gauche et droite de 2px temproraire pour faire comme les checkbox de DevExpress (avant modifs PCS à faire) */
.x-form-cb-label-before {
    margin-left: 2px;
}
/* Ne semble plus utile (aucune différence visuelle constatée) et pose problème lorsque le zoom du navigateur est activé (les cases à cocher passent en-dessous)
.x-form-cb {
    margin-right: 2px;
}*/
/* Positionnement horizontal des checkboxs similaire au desktop */
.x-form-cb-after {
    right: 2px;
}

/* Empêche une bottom-border de la couleur du premier stop (couleur du top-border) d'apparaitre lorsque le zoom du navigateur est activé (110%) */
.x-tab-default-top-active, .x-tab-default-left-active, .x-tab-default-right-active {
    background-repeat: no-repeat;
}

/* Diminution de la marge du haut de 2px pour être plus similaire au desktop */
body:not(.wx-theme-font).x-form-cb-label {
    margin-top: 2px;
}
body:not(.wx-theme-font).x-form-cb {
    margin-top: 3px;
}

.x-splitter:hover {
    background-color: red; /*override in theme*/
}
.x-splitter-horizontal.x-splitter-collapsed:hover,
.x-splitter-vertical.x-splitter-collapsed:hover {
    cursor: pointer;
}

/* Renforcement des éléments disabled */
/* ExtJS 6.5 : nouvelles règles */

/* /home/teamcity/buildAgent/work/47e72153b7b97580/sencha/ext/classic/theme-neutral/sass/src/resizer/Splitter.scss:168 */
.x-splitter-active .x-collapse-el {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: 0.5;
}
/* /home/teamcity/buildAgent/work/47e72153b7b97580/sencha/ext/classic/theme-neutral/sass/var/form/Labelable.scss:156 */
.x-form-item-default.x-item-disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: 0.5;
}
/* /home/teamcity/buildAgent/work/47e72153b7b97580/sencha/ext/classic/theme-neutral/sass/var/form/Labelable.scss:156 */
.x-form-item-toolbar.x-item-disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: 0.5;
}
/* /home/teamcity/buildAgent/work/47e72153b7b97580/sencha/ext/classic/theme-neutral/sass/src/grid/column/Action.scss:14 */
.x-action-col-cell .x-item-disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: 0.5;
}
/* /home/teamcity/buildAgent/work/47e72153b7b97580/sencha/ext/classic/theme-neutral/sass/src/grid/column/Check.scss:42 */
.x-item-disabled .x-column-header-checkbox .x-column-header-checkbox,
.x-item-disabled .x-grid-checkcolumn {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: 0.5;
}
/* /home/teamcity/buildAgent/work/47e72153b7b97580/sencha/ext/classic/theme-neutral/sass/var/tab/Tab.scss:4005 */
.x-tab.x-tab-disabled.x-tab-default .x-tab-icon-el {
    opacity: 0.5;
}


.x-basecheckbox-readonly {
    opacity : 1;
}

.x-basecheckbox-disabled {
    opacity : 0.5;
}

label.x-item-disabled {
    opacity: 0.5;
}

.x-btn-wordwrap .x-btn-inner {
    /* white-space: normal; */
    white-space: pre-line;  /* normal + line-break */
}

.x-btn-disabled {
    cursor: default;
}

/* Titre du ribbon légérement plus bas pour être centré verticalement */
.x-window-header-title.x-toolbar-text-default {
    padding-top: 2px;
}

/* ExtJS 6.5 a passé le padding à 4px ce qui tronque nos textes comme "Méthode d'authentification" dans PC_USER */
.x-btn-inner-default-toolbar-medium {
    padding-right: 3px;
    padding-left: 3px;
}

.x-btn-group .x-btn-default-toolbar-medium .x-btn-inner {
    /* Aligner le texte des boutons du ribbon en haut (ExtJs ajoute line-height: ??px; pour le centrer) */
    line-height: normal !important;
}

/* Aligner les icônes en haut, quel que soit le nombre de lignes du texte (ou avec/sans menu), dans les boutons du ribbon */
.x-btn-group-body .x-btn-button-center.x-btn-icon-top.x-btn-button-default-toolbar-medium {
    justify-content: inherit;
}

/* Petits boutons du ribbon tous à la même largeur par colonne... */
.x-btn-group-body .x-btn-default-toolbar-small {
    width: 100%;
}
/* ...mais avec l'icône restant aligné à gauche */
.x-btn-group-body .x-btn-button-center.x-btn-icon-left.x-btn-button-default-toolbar-small {
    justify-content: inherit;
}

/* Espace vertical et horizontal entre les edits du ribbon */
.x-buttongroup-form-item {
    padding-bottom: 2px;
    padding-right: 2px;
}

/* Pas de bordure quand disabled (comme quand enabled, bordure uniquement quand hover)
   (à revoir si nouveaux skins type Neptune) */
.x-btn.x-btn-disabled.x-btn-default-toolbar-small,
.x-btn.x-btn-disabled.x-btn-default-toolbar-medium,
.x-btn.x-btn-disabled.x-btn-default-toolbar-large {
    border-color: transparent;
}

.x-btn-default-small-icon .x-btn-icon-center {
    height: auto;
    width: auto;
    background-position: center;
}

.x-btn-default-small-icon button, .x-btn-default-small-icon a {
    width: auto !important;
}

.x-btn-default-toolbar-small-icon button, .x-btn-default-toolbar-small-icon a {
    width: 16px !important;
    height: 16px !important;
}

.x-btn-flat.x-btn-transparent:not(.x-btn-over):not(.x-btn-focus):not(.x-btn-pressed) {
    background-image: none;
    background-color: transparent;
    border-color: transparent;
}

/* Bug ExtJs 6.5 avec thèmes Blue/Gray/SolvaSkins : la bordure droite du dernier bouton est masquée */
.x-toolbar-footer .x-toolbar-item {
    margin: 0 4px 0 0;
}

/*.x-btn-flat.x-btn-opaque {
}*/

.x-radioButton-nowrap {
    text-align:left;
}

.x-checkboxgroup-form-item {
    margin-bottom: 0px;
}

.x-form-cb-margin {
    margin-right: 4px;
}

.x-bevel-lineNone {
    border-top-style:none;
    border-top-width:0px !important;
    border-bottom-style:none;
    border-bottom-width:0px !important;
    border-left-style:none;
    border-left-width:0px !important;
    border-right-style:none;
    border-right-width:0px !important;
}

.x-bevel-lineTop {
    border-top-style:solid;
    border-top-width:2px !important;
    border-bottom-style:none;
    border-bottom-width:0px !important;
    border-left-style:none;
    border-left-width:0px !important;
    border-right-style:none;
    border-right-width:0px !important;
}

.x-bevel-lineBottom {
    border-top-style:none;
    border-top-width:0px !important;
    border-bottom-style:solid;
    border-bottom-width:2px !important;
    border-left-style:none;
    border-left-width:0px !important;
    border-right-style:none;
    border-right-width:0px !important;
}

.x-bevel-lineLeft {
    border-top-style:none;
    border-top-width:0px !important;
    border-bottom-style:none;
    border-bottom-width:0px !important;
    border-left-style:solid;
    border-left-width:2px !important;
    border-right-style:none;
    border-right-width:0px !important;
}

.x-bevel-lineRight {
    border-top-style:none;
    border-top-width:0px !important;
    border-bottom-style:none;
    border-bottom-width:0px !important;
    border-left-style:none;
    border-left-width:0px !important;
    border-right-style:solid;
    border-right-width:2px !important;
}

.x-bevel-lineBox {
    border-top-style:inset;
    border-top-width:2px !important;
    border-bottom-style:inset;
    border-bottom-width:2px !important;
    border-left-style:inset;
    border-left-width:2px !important;
    border-right-style:inset;
    border-right-width:2px !important;
}

.x-bevel-lineFrame {
    border-top-style:solid;
    border-top-width:2px !important;
    border-bottom-style:solid;
    border-bottom-width:2px !important;
    border-left-style:solid;
    border-left-width:2px !important;
    border-right-style:solid;
    border-right-width:2px !important;
}
/*Le spacer n'a des traits-tillés qu'au design*/
/*.x-bevel-lineSpacer {
         border-top-style:dashed;
         border-top-width:2px !important;
         border-bottom-style:dashed;
         border-bottom-width:2px !important;
         border-left-style:dashed;
         border-left-width:2px !important;
         border-right-style:dashed;
         border-right-width:2px !important;

}*/

.x-listIcons-view .x-thumb-small{
    float: left;
    margin: 1px;
    text-align: left;
    height: auto;
    white-space: nowrap;
    cursor: pointer;
}

.x-listIcons-view .x-thumb-small img {
    margin-right: 2px;
}

.x-listIcons-view .x-thumb-small span{
    text-overflow: ellipsis;
    overflow: hidden;
}

.x-listIcons-view .x-thumb-large{
    float: left;
    margin: 4px;
    text-align: center;
    height: auto;
    cursor: pointer;
}

.x-listIcons-view .x-thumb-large img {
    margin-bottom: 2px;
}

.x-listIcons-view .x-thumb-large span {
    display: block;
}

.x-talk-metaData-type.x-grid-cell,
.x-listTexts-view.x-grid-cell {
    border: none;
}
.x-listTexts-view.x-grid-cell {
    /* cf x-form-text */
    padding: 1px 3px 1px 3px;
}
.x-listTexts-view .x-list-input{
    /* Largeur min pour saisir du texte*/
    /* TODO: voir si on peut faire mieux, minWidth/maxWidth...*/
    width: 200px;
    background-color: transparent;
    background-clip: border-box;
    border: none;
}
.x-listTexts-view .x-thumb-text{
    float: left;
    margin: 0px 4px;
    cursor: pointer;
    border: 1px;
    border-color: #dfe8f6;
    border-style: solid;
}

.x-action-deleteFile,
.x-action-deleteComboItem,
.x-listTexts-view .x-thumb-del {
    background-image: url(../themes/images/text-small-del.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 9px;
    height: 9px;
    margin: 0px 2px;
    cursor: pointer;
}

/* copié de: .x-grid-item-over, généralement redéfini par skin */
.x-listIcons-view .x-item-over,
.x-listTexts-view .x-item-over {
    color: #000;
    background-color: #efefef;
}

/* copié de: .x-grid-item-selected .x-grid-cell-selected, généralement redéfini par skin  */
.x-listIcons-view .x-dataview-item.x-item-selected,
.x-listTexts-view .x-dataview-item.x-item-selected.x-view-item-focused {
    color: #000;
    background-color: #B8CFEE !important;
}

/* Pas de frame de focus sur l'item quand on est en saisie libre */
.x-listTexts-view.x-list-view-focus.x-listTexts-input .x-dataview-item.x-view-item-focused {
    outline: inherit !important;
}

/* Copié de x-tree-panel */
.x-grid-cell-listcolumn .x-grid-cell-inner {
    padding: 0;
    line-height: 19px;
}

/*.x-list-panel .x-grid-cell-inner {
    cursor: pointer;
}*/

.x-list-panel .x-grid-cell-inner img {
    display: inline-block;
    vertical-align: top;
}

/*
.x-list-panel .x-grid-cell-inner {
    padding: 0px
}
.x-list-panel .x-grid-row .x-grid-cell {
    border: none
}
.x-list-panel .x-grid-row .x-grid-cell-inner {
    height: 18px;
    line-height: 18px;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle
}
.x-list-panel .x-grid-cell-inner {
    border-width: 0 !important;
    padding-left: 2px;
}
*/

/* Left Border */
/*
.x-list-panel .x-tree-checkbox {
    margin: 2px 3px 0px 2px;
}
*/

/* Corrige le user agent stylesheet de Chrome avec ExtJS 6.5 (constaté sur les cases à cocher x-tree-checkbox
   des TpListView/Ext.ux.wx.ListIconsPanel/Ext.ux.wx.ListIconsView
   et des TpCheckListBox/Ext.ux.wx.ListDetailsPanel/Ext.ux.wx.ListDetailsView)
input[type="button" i], ... {
    padding: 1px 6px;
    ...
    border-width: 2px;
}
   Repris de RedWine pour les skins qui ne l'ont pas
*/
.x-tree-checkbox {
    border: 0;
    padding: 0;
}

body:not(.wx-theme-font) .x-tree-icon {
    margin-top: -1px;
}

.x-combo-image-input .x-form-field {
    padding-left: 18px;
    background-repeat: no-repeat;
    background-position: 2px 2px;
}

/* Diminution de l'épaisseur des headers (.x-header-noborder pour les placeholders des docks */
.x-panel-header-default-horizontal,
.x-panel-header-default-horizontal.x-header-noborder {
    padding: 1px 5px;
}
.x-panel-header-default-vertical,
.x-panel-header-default-vertical.x-header-noborder {
    padding: 5px 1px;
}

/* Pour redresser l'icône du Talk dans le placeholder du dock (qui tourne avec le titre). Bug ExtJS 6.5 ou à dessein ? */
.x-title-rotate-right .x-title-icon {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/* +/- row expand (card) */
.x-grid-row-expander {
    margin: auto;
}
.x-grid-rowbody {
    padding: 4px;
}
.wx-card {
    /* line-break according to tpl */
    white-space: nowrap; ;
}


/* Adaptation de la hauteur des headers et lignes des grid */
/* Attention, vérifier x-list-panel et x-tree-panel ! */
body:not(.wx-theme-font) .x-column-header-inner {
    line-height: 14px;
    padding: 3px 4px;
}
body:not(.wx-theme-font) .x-grid-view .x-grid-cell-inner,
body:not(.wx-theme-font) .x-group-view .x-grid-cell-inner,
body:not(.wx-theme-font) .x-large-tree-view .x-grid-cell-inner {
    padding: 2px 3px;
    min-height: 20px; /*image height + padding.top/left*/
}
.x-grid-item-group .x-grid-cell-image {
    min-width: 16px; /*regroupement col image*/
    display: inline-block;
}
/* Les cases à cocher peuvent afficher un total numérique (cnt) */
.x-grid-row-summary-item .x-grid-checkcolumn-cell-inner {
    line-height: inherit;
}
body:not(.wx-theme-font) .x-grid-with-row-lines .x-grid-cell-inner {
    padding-bottom: 3px;
}
.x-toolbar-default { /* Toolbar verticale du grid, navigateur du grid, statusbar, etc. mais pas x-toolbar-footer */
    padding: 0;
}
.x-toolbar-footer {
    background-color: transparent;
}

/* Remove font-size: 0. Failed with linesCount > 1 in grid, checkBox are not displayed */
.x-grid-cell-inner-checkcolumn {
    font-size: initial;
}

.x-grid-cell-inner.x-grid-cell-inner-treecolumn {
    text-overflow: initial; /*No overflow here, no text*/
}

/* Diminution de la hauteur des edit et des boutons lookup/tunnel/spinbuttons (se chevauchent sur certaines formes).
   Ne pas modifier les éditeurs de memo (textarea) -> seulement input.
   On n'arrive plus à avoir une hauteur de 20 px, donc on se contente de 21 px.
   Zone de saisie : 19 px, hauteur totale de l'edit : 21 px. */
body:not(.wx-theme-font) .x-border-box input.x-form-text {
    height: 19px !important; /* ExtJS 6.5: hauteur inner au lieu de 20 car la bordure n'est plus incluse */
}
body:not(.wx-theme-font) input.x-form-text-default {
    min-height: 19px; /* ExtJS 6.5: diminué comme ci-dessus */
}
/* ExtJS 6.5: idem ci-dessus (mais pour le grid), plus diminution de 2px suite à la suppression des lignes du grid.
   On pourrait penser que Blue et Gray ont besoin de plus de hauteur vu qu'ils ont toujours les lignes, mais non... */
body:not(.wx-theme-font) .x-grid-editor.x-border-box input.x-form-text {
    height: 17px !important;
}
/* Attention, on a x-form-text-default pour la plupart des thèmes, mais x-form-text-gridcell pour Blue/Gray */
body:not(.wx-theme-font) .x-grid-editor input.x-form-text {
    min-height: 17px;
    line-height: 18px; /* Pour que le texte ne touche pas la bordure du bas */
}

/* Hauteur totale de l'edit incluant 1 px de bottom-border : pas nécessaire
.x-border-box .x-form-trigger {
    height: 21px !important;
}*/
/* Les hauteurs up et down devraient être identiques mais comme on n'arrive pas à avoir une hauteur de totale de 20 px,
    il faut que la somme fasse 21. */
body:not(.wx-theme-font) .x-border-box .x-form-trigger-wrap .x-form-spinner-up {
    height: 11px !important;
}
body:not(.wx-theme-font) .x-border-box .x-form-trigger-wrap .x-form-spinner-down {
    height: 10px !important;
}
body:not(.wx-theme-font) .x-border-box .x-form-trigger-wrap .x-form-spinner-down {
    background-position: 0 -12px;
}
body:not(.wx-theme-font) .x-border-box .x-form-trigger-wrap-focus .x-form-spinner-down {
    background-position: -51px -12px;
}
body:not(.wx-theme-font) .x-border-box .x-form-trigger-wrap .x-form-spinner-down-over {
    background-position: -17px -12px;
}
body:not(.wx-theme-font) .x-border-box .x-form-trigger-wrap-focus .x-form-spinner-down-over {
    background-position: -68px -12px;
}
body:not(.wx-theme-font) .x-border-box .x-form-trigger-wrap .x-form-spinner-down-click {
    background-position: -34px -12px;
}

/* régler le problème de largeur du timeedit dans le datepicker (trop petit)*/
.x-datepicker-time .x-form-trigger-wrap {
    width: 100px;
}
.x-datepicker-time .x-form-trigger-wrap .x-form-field{
    width: 100px;
}

/* Permettre l'ajout d'une icon personalisable au-dessus des trigger (boutons à côté des zone d'édition) */
.x-form-custom-trigger-icon {
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 20px;
    cursor: pointer;
}

/* Bouton de l'application menu */
.x-application-icon {
    margin-left:auto;
    margin-right:auto;
    width:26px !important;
}

/*adapté selon http://www.sencha.com/forum/showthread.php?100672-What-is-the-best-way-of-adding-shortcut-text-to-menu-item-text*/
.x-menu-item-text-shortcut {
    text-align: right;
    /* padding: 0px; */
    /* display: inline; */
    float: right;
}

.x-menu-item-begingroupseparator {
    border-top: solid 1px #e0e0e0;
    margin-top: 2px;
}

/* Permettre de piloter le bold/italique depuis delphi par le style de l'item */
.x-menu-item-text-default {
    font-style: unset;
    font-weight: unset;
}
/* Si on veut aussi gérer la couleur du text, il faut ajouter ça :
.x-menu-item-text-default, .x-menu-item-default > a {
    color: unset;
}
*/

/*Laisser les menus des grid petit (enum des column)*/
/*Ne pas modifier navBar*/
/* Le padding est diminué de 1px lorsque l'item est actif pour compenser la bordure d'1px qui s'affiche */
body:not(.wx-theme-font) .x-menu-item:not(.x-menu-grid-item):not(.x-navbar-item) .x-menu-item-icon{
    margin: 2px;
    background-repeat: no-repeat;
    background-size: cover;
}
body:not(.wx-theme-font) .x-icon-available.x-menu-item-checked:not(.x-menu-grid-item):not(.x-navbar-item) .x-menu-item-icon {
    /* Augmentation de la taille pour que le cadre "down" soit bien visible autour de l'icône */
    width: 20px;
    height: 20px;
    margin: 0px;
    background-size: initial;
}
.x-menu-item:not(.x-menu-grid-item):not(.x-navbar-item):not(.x-menu-item-plain) {
    padding: 0;
}
.x-menu-item:not(.x-menu-grid-item):not(.x-navbar-item) .x-menu-item-link {
    padding: 2px 2px 2px 2px;/*EXTJS6 padding: 2px 2px 2px 32px;*/
    width: 100%;
}
.x-menu-item:not(.x-menu-grid-item):not(.x-navbar-item) .x-menu-item-link.x-menu-item-active {
    padding: 1px 1px 1px 1px;/*EXTJS6 padding: 1px 1px 1px 31px;*/
}
.x-menu-item:not(.x-menu-grid-item):not(.x-navbar-item):not(.x-menu-item-large):not(.x-menu-item-begingroup) .x-menu-item-arrow {
    top: 9px;
}
.x-menu-grid-item,
.x-navbar-item {
    padding: 0;
}
.x-menu-grid-item .x-menu-item-link,
.x-navbar-item .x-menu-item-link {
    width: 100%;
}
.x-menu-grid-item .x-menu-item-link.x-menu-item-active,
.x-navbar-item .x-menu-item-link.x-menu-item-active {
    padding: 0px 0px 0px 30px;
}
/* icon défini via iconCls pas visible (cf. menu des colonnes), à quoi ça sert ? */
/* .x-icon-available .x-menu-item-icon {
    background-image: none;
} */

/*ExtJs affiche la case à cocher sur la droite, si il y a une image*/
.x-icon-available .x-menu-item-icon-right{
    background-image: none !important;
    width: 0;
}

/* extjs6: used ?... */
/* .x-menu-item-large-icon {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 3px;
    left: 1px;
    background: no-repeat center center;
    padding: 2px;
}

.x-menu-item-large .x-menu-item-link {
    padding-bottom:8px;
    padding-left:37px;
}

.x-menu-icon-large .x-menu-icon-separator{
    left: 33px;
}

.x-menu-item-arrow-large-icon {
    top:11px;
} */

/* .x-menu-medium... => TODO */

/* large menu (used for chart) adapté si utile ailleurs */
.x-menu-large .x-menu-icon-separator-default{
    left: 42px;
}

.x-menu-item-large .x-menu-item-icon {
    width: 32px;
    height: 32px;
    left: 0px;
    top: 0px;
}

.x-menu-item-large .x-menu-item-text {
    line-height: 32px;
}

.x-menu-item-large .x-menu-item-text-default.x-menu-item-indent,
.x-menu-item-large .x-menu-item-text-default.x-menu-item-indent-no-separator {
        margin-left: 52px;
}

.x-menu-item-large .x-menu-item-arrow {
    top: 15px;
}

/*Couleur de fond des items du navbar*/
.x-navbar-menu-body {
    background-color: transparent !important;
}
.x-navbar-menu .x-navbar-item-selected,
.x-menu .x-menu-item-selected {
/* Couleur de la cellule lors de la sélection, doit être plus foncé que la ligne sélectionnée
   Copié de .x-grid-cell-selected
   Idem pour tous les thèmes, excepté pour redWine (voir redWine.css)*/
   background-color: #B8CFEE !important;
}

.x-column-header-sort-ASC .x-column-header-multisort[data-multisort]:after,
.x-column-header-sort-DESC .x-column-header-multisort[data-multisort]:after {
    content: attr(data-multisort);
    position: relative;
    left: 18px;
    top: -2px;
    font-size: 8px;
}

.x-column-header-text-multiLines {
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* Couleur de la cellule lors de la sélection, doit être plus foncé que la ligne sélectionnée
   Copié de .x-grid-cell-selected
   Idem pour tous les thèmes, excepté pour redWine (voir redWine.css)*/
.x-grid-item-selected .x-grid-cell-selected {
    background-color: #B8CFEE !important;
}

 /*Ligne disabled (CheckListBox)*/
.x-grid-row-disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

 /*Ligne des en-tête de group*/
.x-grid-item-group {
    font-weight: bold;
}
.x-grid-item-group {
    /*Forcer la sélection de toute la ligne de regroupement*/
    width: 100% !important;
}
.x-grid-item-group .x-grid-cell-treecolumn {
    /*Forcer la sélection de toute la ligne de regroupement*/
    width: 100% !important;
}
.x-grid-item-group .x-grid-cell:not(.x-grid-cell-treecolumn) {
    display: none;
}
.x-grid-item-group .x-grid-with-col-lines .x-grid-cell {
    /* Ne pas afficher les lignes des colonnes sur les records de regroupement */
    /* cellules tjs dessinées mais cachés, cf ci-dessus */
    border-style: none !important;
}

/* cf. x-column-header-trigger */
.x-column-header-custom-trigger {
    display: inline-block;
    height: 100%;
    width: 14px;
    background: no-repeat left center;
    top: 0;
    right: 0;
    position: absolute;
    cursor: pointer;
    margin-right: 14px;
}
/* change marge for 2 custom trigger  */
.x-column-header-custom-trigger-marge {
    margin-right: 28px;
}

.x-grid-cell-link,
.wx-debug-link:not(.x-item-disabled),
.x-label-link:not(.x-item-disabled) {
    color: blue !important; /*forcer couleur blue pour liens*/
}
.x-grid-cell-link,
.wx-debug-link:not(.x-item-disabled),
.x-label-link:not(.x-item-disabled) {
    cursor: pointer;
    text-decoration: none;
}

.x-grid-cell-link:hover:not(.x-grid-cell-image),
.wx-debug-link:hover:not(.x-item-disabled),
label.x-label-link:hover:not(.x-item-disabled) {
    text-decoration: underline !important;
}

.x-color-picker {
    width: 148px /*4 px larger*/
}

.x-color-picker .x-menu-item-text {
    color: #222;
}

/* Prévoir une marge à droite pour laisser la place à la scrollbar verticale de s'afficher, et ainsi éviter que son
   affichage provoque inutilement l'affichage de la scrollbar horizontale */
.x-scrollable-body {
    padding-right: 17px;
}

/* Correction position scroller */
.x-groupbar-default-scroller .x-box-scroller-body-horizontal {
    margin-left: 14px;
}
.x-groupbar-default-vertical-scroller .x-box-scroller-body-vertical {
    margin-top: 14px;
}

/* L'éditeur ne s'affiche pas sur toute la hauteur lorsque la toolbar est masquée (il lui réserve la place) */
.x-htmleditor-iframe {
    height: 100%;
}
/*Si pas de toolbar, mettre un border en haut*/
.x-htmleditor-no-tbr {
    border-top-width: 1px;
}

.x-sch-event {
	border: 1px solid #aaa;
    background-image: url(../themes/images/sch-eventTransp.png);
    background-repeat: repeat-x;
    position: absolute;
	overflow: hidden;
	cursor: pointer;
	z-index: 3;
    -webkit-box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
    -moz-box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
    -ms-box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
    box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
    border-radius:3px;
}

.x-sch-column-header-inner {
	padding: 0;
}
.x-sch-column-header-time {
    position: relative;
    height: 20px;
}
.x-sch-canvas {
    position: absolute;
}
.x-sch-canvas-line {
	border-left: 1px solid #EEE;
	height: 100%;
	position: absolute;
	overflow: hidden;
	margin-left: -1px;
	z-index: 1
}
.x-sch-canvas-line.x-sch-week-end {
    background-color: #FF8B8B;
    opacity: .5;
}

.x-sch-event .x-sch-event-del,
.ext-evt-bd .x-sch-event-del,
.ext-cal-evt .x-sch-event-del {
    background-image: url(../themes/images/text-small-del.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 9px;
    float: right;
}

.ext-evt-bd .x-sch-event-del,
.ext-cal-evt .x-sch-event-del {
    margin: 4px;
}

.x-sch-event .x-sch-event-del {
    margin: 1px;
}

.x-sch-event .x-sch-event-ico {
    margin: 1px;
}

.x-sch-event .x-sch-event-text {
    margin: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    top: 2px;
}

.x-monthpicker-months {
    width: 88px;
}

/* CheckBox null : possible nécessité d'utiliser ce code pour les nouveaux thèmes :
.x-checkbox-null .x-form-checkbox-default {
    border: 1px inset #a0a0a0;
    background: lightgrey;
    box-shadow: 0 0 0 1px hsl(0, 0%, 80%);
}
*/
.x-checkbox-null .x-form-checkbox {
    background-position: -39px -26px;
}
.x-checkbox-null .x-form-checkbox-focus.x-form-checkbox {
    background-position: -39px 0px;
}

/* ExtJS6 checkBox null dans les grids */
.x-grid-hd-checker-on .x-column-header-checkbox:after,
.x-grid-checkcolumn-null:after {
    background-position: -39px -26px;
}

.x-label-icon-field {
    padding: 2px 0px;
    background-color: inherit; /*transparent*/
    display: flex;
    align-items: center;
}

td.x-session-manager-link,
div.x-session-manager-link {
    cursor: pointer;
    font-weight: bold;
    color: blue !important; /*forcer couleur blue pour liens*/
    text-decoration: underline !important;
}

.x-file {
    padding: 2px;
    -webkit-box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
    -moz-box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
    -ms-box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
    box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
    border-radius: 5px;

/* copié de: .x-grid-item-selected .x-grid-cell-special */
/* TODO: à revoir, déplacer dans css du thème */
    background-image: none;
    background-color: #dfe8f6;
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dfe8f6), color-stop(100%, #cbdaf0));
    background-image: -webkit-linear-gradient(top, #dfe8f6,#cbdaf0);
    background-image: -moz-linear-gradient(top, #dfe8f6,#cbdaf0);
    background-image: -o-linear-gradient(top, #dfe8f6,#cbdaf0);
    background-image: -ms-linear-gradient(top, #dfe8f6,#cbdaf0);
    background-image: linear-gradient(top, #dfe8f6,#cbdaf0)
}

.x-file-img {
    background-image: url(../themes/images/file-empty.png);
    background-repeat: no-repeat;
    background-position: center;
}

/*Mettre l'icon un peu plus haute et ne pas cacher le border*/
.wx-operator-button {
    width: 10px;
    height: 15px;
    background-position: center -2px;
    background-color: transparent;
    background-repeat: no-repeat;
    position: absolute;
    overflow:  hidden;
    cursor: pointer;
    margin-top: 4px;
    top: 0px;
    left: 4px;
}

/*Attention: les icon operator ne conviennent pas pour skin access => faire des icons blank pour ce skin (black)!*/
.wx-operator-button-equal {
    background-image: url(../themes/images/op-equal.png);
}
.wx-operator-button-not-equal{
    background-image: url(../themes/images/op-not-equal.png);
}
.wx-operator-button-great-than-equal{
    background-image: url(../themes/images/op-great-equal.png);
}
.wx-operator-button-less-than-equal{
    background-image: url(../themes/images/op-less-equal.png);
}
.wx-operator-button-great-than{
    background-image: url(../themes/images/op-great.png);
}
.wx-operator-button-less-than{
    background-image: url(../themes/images/op-less.png);
}

.wx-operator-button-empty{
    background-image: url(../themes/images/op-empty.png);
}
.wx-operator-button-not-empty{
    background-image: url(../themes/images/op-not-empty.png);
}
.wx-operator-button-between{
    background-image: url(../themes/images/op-between.png);
}
.wx-operator-button-not-between{
    background-image: url(../themes/images/op-not-between.png);
}
.wx-operator-button-in{
    background-image: url(../themes/images/op-in.png);
}
.wx-operator-button-not-in{
    background-image: url(../themes/images/op-not-in.png);
}
.wx-operator-button-custom {
    background-image: url(../themes/images/filter-small.png);
}

.x-bool-operator-button-and{
    background-image: url(../themes/images/bool-op-and.png);
}
.x-bool-operator-button-not-and{
    background-image: url(../themes/images/bool-op-not-and.png);
}
.x-bool-operator-button-or{
    background-image: url(../themes/images/bool-op-or.png);
}
.x-bool-operator-button-not-or{
    background-image: url(../themes/images/bool-op-not-or.png);
}

.x-filter-remove {
    background-image: url(../themes/images/filter-remove.png);
}
.x-filter-remove-all {
    background-image: url(../themes/images/filter-remove-all.png);
}
.x-filter-add-item{
    background-image: url(../themes/images/filter-add-item.png);
}
.x-filter-add-group{
    background-image: url(../themes/images/filter-add-group.png);
}

.x-filter-grp-text {
    margin: 0px 4px;
}
.x-filter-text .x-thumb-del {
    background-image: url(../themes/images/filter-text-small-del.png);
    background-repeat: no-repeat;
    background-position: top;
    width: 9px;
    height: 9px;
    margin: 0px 2px;
    cursor: pointer;
    /*affiché que dans hover*/
    display: none
}
.x-filter-text {
    cursor: pointer;
    margin: 0px 4px;
}
.x-filter-text:hover {
    text-decoration:underline
}
.x-filter-text:hover .x-thumb-del{
    display:inline;
}

.x-filter-action {
    background-position: 0px 0;
    width: 16px;
    height: 20px;
    cursor: pointer;
}
.x-filter-action:hover {
    background-position: -17px 0;
}

.x-filter-add {
    background-position: 0px 0;
    width: 16px;
    height: 20px;
    cursor: pointer;
}
.x-filter-add:hover {
    background-position: -17px 0;
}

/* Affichage d'un ellipsis vertical pour les textes sur plusieurs lignes */
.vertical-ellipsis:before {
    content:"";
    float: left;
    width: 5px;
    height: 100%;
}
.vertical-ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.vertical-ellipsis:after {
    content: "\022ee"; /*... vertical*/

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -1.25em;
    left: 100%;
    width: 2em;
    margin-left: -2em;
    padding-right: 4px;
    text-align: right;
    background: transparent;
}

/* Code mirror for PCS_SQL macros (les couleurs du dsk sont différentes voir codeMirror.css) */
.cm-s-default .cm-macros {
    color: #B40404;
}
.cm-s-default .cm-macros-params {
    color: #FF0000;
}
.cm-s-default .cm-days {
    color: #01A9DB;
}

/* Couleurs flexmonster html5 (setStyle n'existe plus) */

/* Bloc à supprimer si on veut utiliser les thèmes Flexmonster 2.4 */
.fm-grid-view .fm-header {
    background-color: #7E7E7E !important;
}
#fm-pivot-view .fm-grid-layout .fm-filters {
    background-color: #7E7E7E !important;
}
.fm-grid-view .fm-sheet-selection-canvas {
    background-color: rgba(126, 126, 126, 0.2) !important;
}
.fm-grid-view .fm-sheet-selection-canvas > .fm-border {
    border: 1px solid #7E7E7E !important;
}

/* Totaux */
#fm-pivot-view .fm-grid-layout div.fm-cell.fm-total:not(.fm-header) {
    background-color: #c7c7c7;
}

/* Filtres */
#fm-pivot-view .fm-grid-layout .fm-filters a.fm-filter-header .fm-filter-desc {
    color: #FFFFFF !important;
}

/* Augmentation de la largeur de la modale des filtres */
#fm-pivot-view .fm-filter-view {
    width: 700px !important;
}
#fm-pivot-view .fm-filter-view .fm-filters-table .fm-filters-table-header .fm-select-all-wrapper {
    width: 46% !important;
}
/* Correction affichage de la bordure du dessus de la coche désélectionnée "Sélectionner tous les éléments" dans la
   modale des filtres. */
#fm-pivot-view .fm-filter-view .fm-filters-table .fm-filters-table-header .fm-select-all-wrapper .fm-select-all-label {
    overflow: visible !important;
}
/* Corrections pour texte français/allemand plus long que l'anglais dans la modale des filtres. */
#fm-pivot-view .fm-filter-view .fm-filters-table .fm-filters-table-header .fm-search-wrap {
    width: 120px !important;
}
#fm-pivot-view .fm-filter-view .fm-filter-sort-row .fm-filters-col .fm-filter-label {
    width: auto !important;
}

/* Augmentation de la hauteur du configurateur flexmonster */
#fm-pivot-view .fm-fields-view.fm-pivot-fields {
    height: 630px;
    width: 880px !important;
}
/* Correction affichage du libellé "Glissez et déposez les champs pour les organiser" dans le configurateur. */
   #fm-pivot-view .fm-fields-view .fm-popup-header .fm-ui-col:first-child span.fm-ui-label {
       overflow: visible !important;
   }
/* Corrections pour texte français/allemand plus long que l'anglais */
#fm-pivot-view .fm-fields-view .fm-popup-header .fm-ui-col:first-child {
    margin-right: 0 !important;
}
#fm-pivot-view div.fm-ui-window .fm-popup-subtitle {
    max-width: 330px;
    max-height: 17px;
}
#fm-pivot-view .fm-preloader-view {
    width: 340px !important;
}

#fm-pivot-view .fm-fields-view .fm-popup-content .fm-ui-row {
    height: 503px !important;
}
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap-all .fm-list-content,
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap-cols .fm-list-content,
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap-measures .fm-list-content,
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap-pages .fm-list-content,
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap-rows .fm-list-content {
    height: -webkit-calc(100% - 26px) !important;
    height: calc(100% - 26px) !important;
}

/* Réduction de la hauteur des champs dans le configurateur */
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap .fm-list-content li {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    height: 28px !important;
}
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap .fm-list-content li.fm-values:before {
    top: 3px !important;
}
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap .fm-list-content .fm-lst-measures .fm-aggr-display {
    padding-top: 3px !important;
}
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap .fm-list-header .fm-list-header-label-wrap {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap .fm-list-header.fm-list-header-wide {
    height: 28px !important;
}
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap .fm-list-header .fm-search-wrap .fm-search-btn .fm-icon-act_search {
    top: 1px !important;
}
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap .fm-list-header .fm-search-wrap .fm-search-inp {
    height: 24px !important;
}
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap .fm-list-header .fm-search-wrap .fm-search-btn {
    height: 26px !important;
}
#fm-pivot-view .fm-fields-view .fm-popup-content .fm-list-wrap .fm-list-header .fm-search-wrap .fm-icon-act_close:before {
    top: 0px !important;
}

/* Réduction de la hauteur cellules et des items de menu */
#fm-pivot-view .fm-grid-row {
    height: 22px;
    min-height: 22px;
    max-height: 22px;
}
#fm-pivot-view .fm-grid-row-mobile {
    height: 22px;
    min-height: 22px;
    max-height: 22px;
}
#fm-pivot-view .fm-grid-layout .fm-data-sheet .fm-cell {
    padding-top: 5px !important;
}
#fm-pivot-view .fm-grid-layout .fm-cell.fm-h-sort {
    padding-top: 3px !important;
}
#fm-pivot-view .fm-grid-layout .fm-cell.fm-v-sort {
    padding-top: 5px !important;
}
#fm-pivot-view .fm-grid-layout div.fm-cell {
    padding-top: 5px !important;
    padding-bottom: 2px !important;
}
#fm-pivot-view .fm-grid-layout .fm-row i.fm-icon:not(.fm-collapsed-icon):not(.fm-expanded-icon) {
    top: -3px !important;
}

#fm-pivot-view .fm-ui-context-menu .fm-ui-list li {
    padding: 4px 6px !important;
}
#fm-pivot-view .fm-ui-context-menu .fm-ui-list li.fm-selected:before {
    font-size: 21px !important;
    top: 2px !important;
}
#fm-pivot-view div.fm-ui-dropdown .fm-ui-dropdown-btn {
    padding: 3px 21px 4px 6px !important;
}
#fm-pivot-view div.fm-ui-dropdown .fm-ui-dropdown-list ul li {
    padding: 5px 5px 1px !important;
}
#fm-pivot-view .fm-charts-view .fm-header-toolbar .fm-charts-filters-btn .fm-ui-dropdown-list .fm-ui-list li {
    padding-right: 25px !important;
}
#fm-pivot-view .fm-charts-view .fm-header-toolbar .fm-charts-filters-btn .fm-ui-dropdown-list .fm-ui-list li.fm-filtered {
    padding-right: 47px !important;
}
#fm-pivot-view .fm-charts-view .fm-header-toolbar .fm-charts-filters-btn .fm-ui-dropdown-btn:before {
    font-size: 20px !important;
    left: 3px !important;
}
#fm-pivot-view .fm-charts-view .fm-header-toolbar .fm-charts-filters-btn .fm-ui-dropdown-list .fm-ui-list li:after {
    right: 2px !important;
    font-size: 20px !important;
}
#fm-pivot-view .fm-charts-view .fm-header-toolbar {
    padding: 10px 20px !important;
}
#fm-pivot-view div.fm-ui-dropdown .fm-ui-dropdown-btn {
    height: 26px !important;
}
#fm-pivot-view input[type=number].fm-ui-text-input, #fm-pivot-view input[type=text].fm-ui-text-input {
    height: 26px !important;
}


/* Liens callobjects */
#fm-pivot-view .fm-grid-view .fm-header .link {
    text-decoration: underline;
    cursor: pointer;
    color: #ffffff;
}

/* Talk */
/*TODO voir ce qu'il faut déplacer dans les thèmes*/
.x-talk-view {
    padding: 15px;
    background: #fff;
}

.x-talk-item .x-talk-contents-wrap h4 {
    font-size: 14px;
    margin: 0 10px 12px 0;
    float: left
}

.x-talk-item .x-talk-contents-wrap h4 span {
    margin-left: 8px;
    font-size: 18px;
    position: relative;
    top: 2px;
}

.x-talk-top-right {
    float: right;
    margin-top: -14px;
    margin-right: -16px;
}

.x-talk-top-right-dropdown {
    display: none;
    position: absolute;
    z-index: 1;
}

.x-talk-top-right:hover .x-talk-top-right-dropdown {
    display: block;
}


.x-talk-from-now {
    float: right;
}

.x-talk-from-now span {
    margin-right: 5px;
    font-size: 16px;
    position: relative;
    top: 1px
}

.x-talk-item-bottom,
.x-talk-item .x-talk-comments .x-talk-contents-wrap {
    margin-left: 65px
}

.x-talk-item-bottom.x-talk-responses {
    padding-bottom: 15px;
}

.x-talk-item .x-talk-comments .x-talk-contents-wrap .x-talk-contents {
    margin-bottom: 15px;
    white-space: normal;
    word-wrap: break-word;
    clear: both
}

.x-talk-item .x-talk-contents-wrap {
    margin: 0px 0px 15px 30px;
    border: 1px solid #ddd;
    position: relative;
    padding: 15px;
    white-space: normal
}

.x-talk-item .x-talk-contents-wrap:before, .x-talk-item .x-talk-contents-wrap:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0
}

.x-talk-item .x-talk-contents-wrap:before {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #ddd;
    margin: 15px 0 0 -9px
}

.x-talk-item .x-talk-contents-wrap:after {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #fff;
    margin: 15px 0 0 -8px
}

.x-talk-item .x-talk-contents-wrap-highlighted {
    border: 3px solid #000000;
 }

.x-talk-item .x-talk-contents-wrap-highlighted:before {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 10px solid #000000;
    margin: 15px 0 0 -10px
}

.x-talk-item .x-talk-contents-wrap-highlighted:after {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 10px solid #fff;
    margin: 15px 0 0 -6px
}

.x-talk-item .x-talk-contents-wrap-unread {
    border: 3px solid #ddd;
 }

.x-talk-item .x-talk-contents-wrap-unread:before {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 10px solid #ddd;
    margin: 15px 0 0 -10px
}

.x-talk-item .x-talk-contents-wrap-unread:after {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 10px solid #fff;
    margin: 15px 0 0 -6px
}

.x-talk-comments.x-talk-sub-comments {
    margin: 0 0 10px 60px;
}

.x-talk-like-comments-btn-wrap {
    text-align: right;
    padding-bottom: 15px;
}

.x-talk-btn {
    height: 20px;
    width: 20px;
    display: inline-block;
}

.x-talk-btn.x-btn-inner-center {
    text-align: center;
}

.x-talk-btn-flat:not(.x-btn-pressed) {
    background-image: none;
    background-color: transparent;
    border-color: transparent;
}

.x-talk-btn-margin {
    margin-left: 2px;
    margin-right: 2px;
}

/*cf: .x-btn-default-small-over*/
.x-talk-btn:hover {
    border-color: #cf4f4f;
    background-image: none;
    background-color: #fecdcd;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fecdcd), color-stop(48%, #fec4c2), color-stop(52%, #ecb6b0), color-stop(100%, #f1b9b3));
    background-image: -webkit-linear-gradient(top, #fecdcd, #fec4c2 48%, #ecb6b0 52%, #f1b9b3);
    background-image: -moz-linear-gradient(top, #fecdcd, #fec4c2 48%, #ecb6b0 52%, #f1b9b3);
    background-image: -o-linear-gradient(top, #fecdcd, #fec4c2 48%, #ecb6b0 52%, #f1b9b3);
    background-image: linear-gradient(top, #fecdcd, #fec4c2 48%, #ecb6b0 52%, #f1b9b3);
}

.x-talk-user-icon {
    height: 50px;
    width: 50px;
    border: 2px solid #ddd;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

body:not(.wx-theme-font) .x-talk-responses .x-talk-btn {
    width: 120px;
}
body:not(.wx-theme-font) .x-talk-more .x-talk-btn {
    width: 100px;
}

.x-talk-btn:hover .x-talk-user-icon-hover {
    display: inline;
}

.x-talk-metaData {
    border-top: solid;
    border-top-width: 1px;
    padding-top: 4px;
    border-color: #ddd;
}

.x-talk-metaData-type::after,
.x-talk-metaData::after {
    content: "";
    clear: both;
    display: table;
}

.x-talk-metaData-type {
    margin-top: 2px;
}

.x-talk-metaData-icon {
    background-position: 50%;
    float: left;
    width: 16px;
    height: 16px;
}

.x-talk-metaData-item {
    margin-left: 8px;
    float: left;
}

/*Pour que le badge s'affiche, suppresion du css ExtJS*/
.x-btn-badge.x-btn-default-small:after,
.x-btn-badge.x-btn-default-medium:after,
.x-btn-badge.x-btn-default-large:after{
    display: inherit;
    content: inherit;
}

.x-btn-badge {
    position: relative;
    overflow: visible;
}

.x-btn-default-large.x-btn-badge[data-btn-badge]::after {
    content: attr(data-btn-badge);
    text-align: center;
    position: absolute;
    font-size: 10px;
    top: -6px;
    right: 2px;
    width: 20px;
    font-weight: bold;
    color: white;
    border-radius: 50%;
    background-color: #C00;
}

.x-btn-default-small.x-btn-badge[data-btn-badge]:after{
    content: attr(data-btn-badge);
    position: absolute;
    top: -6px;
    width: auto;
    font-weight: bold;
    color: white;
    /* text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0; */
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 1px 4px;
    /* background-image: none; */
    background-color: #C00;
    /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff1a1a), color-stop(3%, #e60000), color-stop(100%, #b30000)); */
    /* background-image: -webkit-linear-gradient(top, #ff1a1a,#e60000 3%,#b30000); */
    /* background-image: linear-gradient(top, #ff1a1a,#e60000 3%,#b30000); */
    /* -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0.1em 0.1em; */
    /* box-shadow: rgba(0, 0, 0, 0.3) 0 0.1em 0.1em; */
}

.x-btn-default-small:not(.x-btn-badge-small).x-btn-badge[data-btn-badge]:after {
    font-size: 10px;
    right: 2px;
}
.x-btn-badge-small[data-btn-badge]:after {
    line-height: normal;
    font-size: 8px;
    right: -4px;
}

.x-tip-tool {
    margin-left: 12px;
    float: right;
}
.x-tip-title {
    font-weight: bold;
}
.x-tip-title-chart {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    float: left;
    margin-right: 2px;
    border: 1px solid #ddd;
}
.x-tip-title-sep {
    border-bottom: 1px solid #ddd;
    padding-bottom: 2px;
    margin-bottom: 8px;
}
.x-tip-text {
    min-width: 100px;  /*pour affichage du bouton custom sur la droite*/
    margin-bottom: 4px;
}

.x-tip-text, .x-tip-customText {
    white-space: pre-wrap;
}

/* Affichage de l'icône avec une marge pour qu'il ne soit pas collé en haut à gauche */
.x-tip-body-form-invalid {
    background-position-y: 3px;
}

/*cf .x-grid-editor .x-form-cb */
.x-filter-row .x-form-cb {
    position: static;
    display: inline-block;
}

.x-filter-row input {
    padding-left: 13px;
}

.x-filter-row {
    min-height: 22px;
}

.x-aggregate-grid {
    background-image: url(../themes/images/ag-grid.png);
}
.x-aggregate-group {
    background-image: url(../themes/images/ag-group.png);
}
.x-aggregate-sum {
    background-image: url(../themes/images/ag-sum.png);
}
.x-aggregate-avg {
    background-image: url(../themes/images/ag-avg.png);
}
.x-aggregate-min {
    background-image: url(../themes/images/ag-min.png);
}
.x-aggregate-max {
    background-image: url(../themes/images/ag-max.png);
}
.x-aggregate-cnt {
    background-image: url(../themes/images/ag-cnt.png);
}
.x-aggregate-formula {
    background-image: url(../themes/images/ag-formula.png);
}

.wx-tree-expand-all {
    background-image: url(../themes/images/tree-expand-all.png);
}
.wx-tree-collapse-all {
    background-image: url(../themes/images/tree-collapse-all.png);
}

.x-chart-settings {
    background-image: url(../themes/images/chart-settings.png);
    background-size: cover;
 }
.x-chart-line {
   background-image: url(../themes/images/chart-line.png);
   background-size: cover;
}
.x-chart-area {
   background-image: url(../themes/images/chart-area.png);
   background-size: cover;
}
.x-chart-areaStack {
   background-image: url(../themes/images/chart-areaStack.png);
   background-size: cover;
}
.x-chart-bar {
   background-image: url(../themes/images/chart-bar.png);
   background-size: cover;
}
.x-chart-barStack {
   background-image: url(../themes/images/chart-barStack.png);
   background-size: cover;
}
.x-chart-bar3D {
   background-image: url(../themes/images/chart-bar3D.png);
   background-size: cover;
}
.x-chart-bar3DStack {
   background-image: url(../themes/images/chart-bar3DStack.png);
   background-size: cover;
}
.x-chart-column {
   background-image: url(../themes/images/chart-column.png);
   background-size: cover;
}
.x-chart-columnStack {
   background-image: url(../themes/images/chart-columnStack.png);
   background-size: cover;
}
.x-chart-column3D {
   background-image: url(../themes/images/chart-column3D.png);
   background-size: cover;
}
.x-chart-column3DStack {
   background-image: url(../themes/images/chart-column3DStack.png);
   background-size: cover;
}
.x-chart-pie {
   background-image: url(../themes/images/chart-pie.png);
   background-size: cover;
}
.x-chart-pie3D {
   background-image: url(../themes/images/chart-pie3D.png);
   background-size: cover;
}
.x-chart-radar {
   background-image: url(../themes/images/chart-radar.png);
   background-size: cover;
}

/* Totaux en-dessous d'une colonne checkBox */
.x-grid-item-sum .x-grid-checkcolumn-cell-inner {
    line-height: inherit;
}

/* grouping TODO: revoir selon thème...*/
.x-grouping-panel-ct {
    background-color: darkgray;
}

.x-group-column:not(:first-child):before {
    content: '';
    background-color: red;
    position: absolute;
    display: block;
    height: 2px;
    left: -10px;
    width: 20px;
    top: 14px;
    z-index: -1;
}

.x-grouping-panel-text{
    color: white;
    padding: 7px;
}
.x-group-column{
    background-image: none!important;
    background-color: transparent!important;
}
.x-group-column .x-column-header-sort-ASC,
.x-group-column .x-column-header-sort-DESC{
    background-color: transparent!important;
}
.x-group-column-inner{
    padding: 3px;
    height: 20px;
    margin: 5px;

    /* x-column-header position: absolute*/
    position: static;
    /* x-column-header border-right*/
    border: none;
}

.x-group-column-text {
    cursor: pointer;
    float: left;
}

.x-group-menu.x-menu-item-arrow-default-menubar {
    background-repeat: no-repeat;
    height: auto;
    cursor: pointer;
}

.x-group-add {
    background-image: url(../themes/images/group-add.png);
}
.x-group-remove {
    background-image: url(../themes/images/group-remove.png);
}

/* Texte des TpLabel avec AutoSize=False tronqués sur le bas des lettres à cause de overflow:hidden.
   Bug ? overflow-x:hidden + overflow-y:visible réagit comme overflow-y:auto (donc scroll).
   Possibilité de filtrer sur AutoSize=False avec label[style*='overflow:hidden;'] */
label {
    min-height: 16px;
}

/* Diagramme SQM_ANC: Couleur de texte et lignes mieux visibles */
.wx-custom-diagram .x-label-link:not(.x-item-disabled) {
    color: black !important;
}
.wx-custom-diagram .x-bevel-lineTop,
.wx-custom-diagram .x-bevel-lineRight,
.wx-custom-diagram .x-bevel-lineBottom,
.wx-custom-diagram .x-bevel-lineLeft {
    border-color: #d0d0d0;
    border-top-color: #d0d0d0;
    border-right-color: #d0d0d0;
    border-bottom-color: #d0d0d0;
    border-left-color: #d0d0d0;
}

.wx-dragover::before {
    content: attr(data-ddFilesText);
    background-color: white;
    position: absolute;
    color: #2c3e50; /*color like upload icon*/
    font-weight: bold;
    text-align: center;
    width: 400px;
    margin-left: -200px;
    left: 50%;
    top: 50%;
    margin-top: -60px; /*Icon*/
    z-index: 9;
}

.wx-dragover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*filter est ensuite appliqué dans le css du thême => la couleur de l'icon et la couleur du fond est adaptée selon le thème*/
    background-color: rgba(62, 60, 60, 0.3);
    background-image: url(../themes/images/upload.png);
    background-repeat: no-repeat;
    background-position: center;
    z-index: 9;
}

.wx-window-toast,
.wx-window-toast .x-window-body-default{
    border: none;
    padding: 0;
    background-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.wx-toast.wx-toast-error{
    border-color: rgb(255, 57, 46);
}
.wx-toast.wx-toast-warning{
    border-color: rgb(255, 158, 20);
}
.wx-toast.wx-toast-information{
    border-color: #4c7fd8;
}
.wx-toast-error .wx-toast-icon{
    background-color: rgb(255, 57, 46);
    background-image:url(../themes/images/toast-error.svg);
    display: block;
}
.wx-toast-warning .wx-toast-icon{
    background-color: rgb(255, 158, 20);
    background-image: url(../themes/images/toast-warning.svg);
    display: block;
}
.wx-toast-information .wx-toast-icon{
    background-color: #4c7fd8;
    background-image: url(../themes/images/toast-info.svg);
    display: block;
}
.wx-toast-message .wx-toast-icon{
    background-color: black;
    background-image: url(../themes/images/toast-message.svg);
    display: block;
}
.wx-toast{
    background-color: white;
    border-radius: 5px;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    display: flex;
    flex-direction: row;
    margin: 0px 20px 0px 0px;
}
.wx-toast-icon{
    width: 40px;
    display: none;
    background-size: 70%;
    background-position: center center;
    background-repeat: no-repeat;
    align-items: stretch;
    float: left;
}
.wx-toast-msg{
    align-items: stretch;
    display: flex;
    flex-direction: column;
}
.wx-toast-msg-header{
    font-weight: bold;
    margin: 10px 10px 0px 10px;
    align-items: stretch;
}
.wx-toast-msg-body{
    margin: 0px 10px 10px 10px;
    align-items: stretch;
}

.x-panel-header-title .x-title-icon {
    background-size: cover;
}
.x-panel-header .x-tool .x-tool-icon {
    background-size: cover;
}
/* Color is specified on icon css (wx-color-XXX) */
.x-panel-header .x-tool .x-tool-icon {
    background-color: transparent;
}
.x-tool.x-tool-disabled {
    cursor: initial;
}

/* remove outline when focused for card item */
.x-keyboard-mode .x-view-item-focused.wx-card-item {
    outline: none !important;
}

.wx-carousel .x-panel-body {
    border: none;
}
.wx-carousel .x-card-view {
	scroll-snap-type: x mandatory;
	display: flex;
	-webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.wx-carousel .x-card-view::-webkit-scrollbar {
    display: none;
}
.wx-carousel .wx-card-item {
	scroll-snap-align: center;
}
.wx-carousel .wx-card-item img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
}
.wx-carousel-bar {
    text-align: center;
    margin: 6px 0px;
}

.wx-carousel-prev,
.wx-carousel-next {
    position: relative;
    top: -2px;
}
.wx-carousel-prev,
.wx-carousel-next,
.wx-carousel-dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    display: inline-block;
}
.wx-carousel-dot {
    border-radius: 50%;
    background-color: #bbb;
    transition: background-color 0.6s ease;
}
.wx-carousel-dot.wx-carousel-dot-active, .wx-carousel-dot:hover {
    background-color: #717171;
}

.wx-media-capture video{
    display: none;
}
.wx-media-capture canvas{
    object-fit: contain;
    display: block;
}
.wx-media-video video{
    display: block;
}
.wx-media-video canvas{
    display: none;
}
.wx-media div,
.wx-media video,
.wx-media canvas {
    width: 100%;
    height: 100%;
}

.wx-media-scan-video .wx-media-scan-close {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    right: 1px;
    top: 1px;
    cursor: pointer;
    /*background-image: tool-sprites.png */ /*theme dependant*/
}

.wx-vertical-align-center {
    display: flex;
    align-items: center;
}

.wx-horizontal-align-center {
    display: flex;
    justify-content: center;
}

/* Drag and Drop*/

.wx-dd-item-hide {
    display: none;
}
.wx-dd-item-disabled {
    opacity: 0.5;
}
.wx-dd-draggable {
    /* Must be set to use drag/drop on touch */
    touch-action: pinch-zoom;
}

.wx-dd-clone .x-grid-row .x-grid-cell-selected,
.wx-dd-clone .x-grid-item-selected .x-grid-cell-selected {
    background-color: transparent !important;
}
.wx-dd-clone .x-grid-item {
    background-color: transparent;
}

.wx-dd-clone {
    box-shadow: 3px 3px 3px gray;
    background-color: white;
    border: 1px solid gray;
    padding-left: 24px;
}
.wx-dd-clone::after {
    content: "";
    background-image:url(../themes/images/drop-yes.png);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
    width: 16px;
    height: 16px;
}
.wx-dd-clone.wx-dd-invalid::after {
    background-image:url(../themes/images/drop-no.png);
}

.x-dataview-item.wx-dd-target,
.x-grid-item.wx-dd-target,
.x-grid-item.wx-dd-target-before {
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-top-color: green !important;
    background-color: transparent;
}
.x-grid-item.wx-dd-target-invalid {
    background-color: transparent;
}

.x-grid-view.wx-dd-target-all .x-grid-item-container::after,
.x-tree-view.wx-dd-target-all .x-grid-item-container::after,
.x-list-view.wx-dd-target::after,
.x-list-view.wx-dd-target-all::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d0ddf5;
    opacity: 0.3;
}

.x-list-view.wx-dd-target,
.x-list-view.wx-dd-target-all {
    position: static; /*scroll and dd-background-color*/
}

.x-grid-view.wx-dd-target::after,
.x-tree-view.wx-dd-target::after {
    content: "";
    width: 100%;
    border-color: green;
    border-style: solid;
    border-width: 1px;
    position: absolute;
}
.x-grid-item.wx-dd-target-node {
    border-style: solid !important;
    border-width: 2px !important;
    border-color: green !important;
    background-color: transparent;
}

/*space for dd after all records when grid is locked*/
.x-grid-scroll-body .x-scroller-spacer {
    border-bottom-width: 4px !important;
    border-bottom-style: solid !important;
    border-bottom-color: transparent !important;
    width: 100%;
}