:root {
    /*--docage: #669935;*/
    --docage-light: #F8F5E4;
    --docage-dark: #121f24;
    --docage-primary: #1D4755;
    --docage-primary-light-75: #1D4755bf;
    --docage-primary-light-50: #1d475580;
    --docage-primary-light-25: #1d475540;
    /*--docage-secondary: #72302C;
    --docage-secondary-light-75: #72302Cbf;
    --docage-secondary-light-50: #72302C80;
    --docage-secondary-light-25: #72302C40;*/
    --docage-secondary: #FC5950;
    --docage-secondary-light-75: #FC5950bf;
    --docage-secondary-light-50: #FC595080;
    --docage-secondary-light-25: #FC595040;
    --docage-tertiary: #00A08F;
    --docage-tertiary-light-75: #00A08Fbf;
    --docage-tertiary-light-50: #00A08F80;
    --docage-tertiary-light-25: #00A08F40;
    --dug-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 0.3rem 0.3rem 9px rgba(94,104,121,0.3);
    --emerged-shadow: -5px -5px 9px rgba(255,255,255,0.45), 0.3rem 0.3rem 9px rgba(94,104,121,0.3);
    /*--docage-tertiary: #0D4C46;
    --docage-tertiary-light-75: #0D4C46bf;
    --docage-tertiary-light-50: #0D4C4680;
    --docage-tertiary-light-25: #0D4C4640;*/
    --error: red;
    --error-light: #ff462d;
    --error-light-75: #ff462dbf;
    --portal: #336732;
    --portal-light: #85bb49;
    --contact: #706795;
    --mail: #a65e26;
    --mail-light: #f4ab49;
    --orange: #ffa500;
    --orange-75: #ffa500bf;
    --orange-25: #ffa50040;
    --radius: 1rem;
    /*--fa-primary-color: #2a9d8f;*/
    /*--fa-primary-color: #f4a261;*/
    /*--fa-primary-color: #F8F5E4;*/
    --fa-primary-color: #c8c5b8;
    --fa-secondary-color: #1D4755;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
    --fa-width: 1em;
    --grids-height:calc(100% - 36px);
}

body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    max-height: 100vh;
    max-width: 100vw;
    font-weight: 200;
}
/* Pour éviter que le padding ne modifie la largeur et la hauteur des div*/
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*.dxreView {
    height: 100% !important;
}*/

/*body {
    background: url(../images/team-say-hello.jpg) no-repeat center;
    background-size: cover;
}*/

#app-side-nav-outer-toolbar {
    flex-direction: column;
    display: flex;
    height: 100%;
    width: 100%;
}

.showFilterPanel {
    height: 54px !important;
    padding: 18px 16px;
    visibility: visible;
}
.hideFilterPanel {
    height: 0px !important;
    padding: 0px;
    visibility: hidden;
}

/* Bandeau d'affichage lorsque le compte est un compte de démonstration */
#subscription-section {
    background-color: var(--orange-75);
    height: 2rem;
    width: 100vw;
    color: white;
    /*margin: 0 -1rem;*/
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 300;
    border-radius: var(--radius);
    margin-bottom: 5px;
}
#subscription-section span {
    font-weight: bold;
}

/* Bandeau de notification dans les onglets*/
.notificationbar-action, .notificationbar-success, .notificationbar-error {
    height: 30px !important;
    width: 100%;
    color: white;
    margin-bottom: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 200;
}
.notificationbar-action {
    background-color: var(--orange-75);
    animation-duration: 2.5s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
}

@keyframes clignoter {
    0% { opacity: 1; }
    40% { opacity: 0.3; }
    100% { opacity: 1; }
}

.notificationbar-success {
    background-color: var(--docage-primary-light-75);
}

.notificationbar-error {
    background-color: var(--error-light-75);
}
/* Test */
/*.dx-item-content.dx-multiview-item-content {
    height: 100% !important;
    width: 100% !important;
}*/

/*.dx-multiview-wrapper {  
   overflow: visible !important;  
}*/  

/*.dx-multiview-item {  
   overflow: visible !important;  
}  */

/**/
.home-header {
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    z-index: 1501;
}
.center-middle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.badge {
    font-weight: 200!important;
}

.bt-close-tab {
    content: "";
    width: 1rem;
    height: 1rem;
    display: inline-block;
    padding: 0;
    margin: 0 0 30px 0;
    vertical-align: top;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
}

.bt-close-tab {
    background-image: url(../icons/cancel.svg);
}

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

/* Pour menu dans liste qui apparait dans toolbar*/
.dx-list-item-content {
    font-size: 14px;
}

.dx-toolbar .dx-toolbar-item.menu-button {
    width: 60px;
    text-align: center;
    padding: 0;
}

    .dx-toolbar .dx-toolbar-item.menu-button > .dx-toolbar-item-content .dx-icon {
        color: #ff5722;
    }

.dx-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    border-radius: var(--radius);
    background-color: #fff;
    margin: 2px 2px 3px;
}

    .dx-card.wide-card {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        border-right: 0;
        border-left: 0;
    }



.with-footer > div > div > .dx-scrollable-content {
    height: 100%;
}

    .with-footer > div > div > .dx-scrollable-content > .dx-scrollview-content {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

.dx-swatch-additional {
    background-color: #fff;
}
/*#region Treeview de la page index */

.dx-swatch-additional .dx-widget {
    color: #fff;
    font-weight: 400;
    font-size: 1rem;
    font-family: Roboto;
    /*font-family: Roboto,RobotoFallback,Helvetica,Arial,sans-serif;*/
    line-height: 24px;
}

.dx-swatch-additional .dx-treeview-node {
    padding: 0px 6px;
}

.dx-swatch-additional .dx-treeview-item {
    padding: 0px 10px;
    color: #303030;
    /*text-shadow: -1px 1px 0 #336732, 1px 1px 0 #336732, 1px -1px 0 #336732;*/
    /*text-shadow: 0 0 0.3rem #336732;*/
}


.dx-swatch-additional .dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item {
    background-color: #3f3f4b;
}

.dx-swatch-additional .dx-treeview-node.dx-state-selected .dx-treeview-item *,
.dx-swatch-additional .dx-treeview-node.dx-state-focused .dx-treeview-item * {
    color: deeppink;
}

.dx-swatch-additional .dx-treeview-node .dx-icon {
    height:32px;
    width: 2rem;
    margin: 0;
}

.dx-swatch-additional .dx-treeview-item .dx-icon {
    margin: 0;
}

/*#endregion Treeview de la page index */
.dx-treeview-item-without-checkbox .dx-treeview-item {
    padding-left: 0;
}
/*Personnalisation en dehors du thème :*/
.form-50 {
    margin: 1rem;
    width: 50%;
}

.form {
    margin: 1rem;
    padding-bottom: 1rem;
    /* overflow: auto; */
    height: 100%;
}
.dx-toolbar.dx-toolbar-multiline .dx-toolbar-item {
    height: 2rem;
}
/*Pour la responsive box des transaction members*/
.leftside, .rightside {
    height: 50vh;
    width: 100%;
}

@media screen and (min-width:768px) {
    .leftside {
        height: 100vh;
        width: 95%;
    }

    .rightside {
        height: 100vh;
        width: 100%;
    }
}

#renderBody {
    margin-left: 0px;
    margin-right: 0px;
}

@media screen and (min-width:1024px) {
    #renderBody {
        margin-left: 7px;
        margin-right: 7px;
    }
}
.dx-datagrid .dx-row > td {
    padding: 0.5rem 0.5rem;
    font-size: 14px;
    line-height: 1rem;
}
.dx-datagrid .dx-icon {
    height: 24px;
    cursor: pointer;
    margin-right: 4px;
}

/*#region Personnalisation des couleurs pour Docage*/
    /* bc = background color fc = front color*/
    .bc-white {
    background-color: #fff!important;
}

.bc-docage {
    background-color: var(--docage-primary) !important;
}
    .bc-docage:hover {
        background-color: var(--docage-primary-light-50) !important;
    }

.bc-docage-light {
    background-color: var(--docage-primary-light-50) !important;
}
    .bc-docage-light:hover {
        background-color: var(--docage-primary) !important;
    }

.bc-docage-gray {
    background-color: var(--docage-dark) !important;
}

.bc-error {
    background-color: var(--error) !important;
}

.bc-error-light {
    background-color: var(--error-light) !important;
}

.bc-error-light-75 {
    background-color: var(--error-light-75) !important;
}

.bc-primary {
    background-color: var(--docage-primary) !important;
}

    .bc-primary:hover {
        background-color: var(--docage-primary-light-50) !important;
    }

.bc-primary-light-25 {
    background-color: var(--docage-primary-light-25) !important;
}

    .bc-primary-light-25:hover {
        background-color: var(--docage-primary) !important;
    }

.bc-primary-light-50 {
    background-color: var(--docage-primary-light-50) !important;
}

    .bc-primary-light-50:hover {
        background-color: var(--docage-primary) !important;
    }

.bc-primary-light-75 {
    background-color: var(--docage-primary-light-75) !important;
}

    .bc-primary-light-75:hover {
        background-color: var(--docage-primary) !important;
    }

.bc-secondary {
    background-color: var(--docage-secondary)!important;
}
    .bc-secondary:hover {
        background-color: var(--docage-secondary-light-50)!important;
    }

.bc-secondary-light-25 {
    background-color: var(--docage-secondary-light-25) !important;
}

    .bc-secondary-light-25:hover {
        background-color: var(--docage-secondary-light-75) !important;
    }

.bc-secondary-light-50 {
    background-color: var(--docage-secondary-light-50)!important;
}
    .bc-secondary-light-50:hover {
        background-color: var(--docage-secondary)!important;
    }

.bc-secondary-light-75 {
    background-color: var(--docage-secondary-light-75) !important;
}

    .bc-secondary-light-75:hover {
        background-color: var(--docage-secondary) !important;
    }

.bc-tertiary {
    background-color: var(--docage-tertiary) !important;
}

    .bc-tertiary:hover {
        background-color: var(--docage-tertiary-light-50) !important;
    }

.bc-tertiary-light-25 {
    background-color: var(--docage-tertiary-light-25) !important;
}
    .bc-tertiary-light-75:hover {
        background-color: var(--docage-tertiary) !important;
    }
.bc-tertiary-light-50 {
    background-color: var(--docage-tertiary-light-50) !important;
}
    .bc-tertiary-light-50:hover {
        background-color: var(--docage-tertiary) !important;
    }

.bc-tertiary-light-75 {
    background-color: var(--docage-tertiary-light-75) !important;
}
    .bc-tertiary-light-75:hover {
        background-color: var(--docage-tertiary) !important;
    }
.bc-portal {
    background-color: var(--portal)!important;
}
.bc-portal:hover {
    background-color: var(--portal-light)!important;
}

.bc-portal-light {
    background-color: var(--portal-light)!important;
}
.bc-portal-light:hover {
    background-color: var(--portal)!important;
}

.bc-contact {
    background-color: var(--docage-tertiary) !important;
}
.bc-contact:hover {
    background-color: var(--docage-tertiary-light-50) !important;
}

.bc-contact-light {
    background-color: var(--docage-tertiary-light-50) !important;
}
.bc-contact-light:hover {
    background-color: var(--docage-tertiary) !important;
}

.bc-mail {
    background-color: var(--mail)!important;
}
.bc-mail:hover {
    background-color: var(--mail-light)!important;
}

.bc-mail-light {
    background-color: var(--mail-light)!important;
}
.bc-mail-light:hover {
    background-color: var(--mail)!important;
}
.bc-orange {
    background-color: var(--orange) !important;
}
.bc-orange-75 {
    background-color: var(--orange-75) !important;
}
.bc-orange-25 {
    background-color: var(--orange-25) !important;
}


.fc-white {
    color: #fff;
}

.fc-docage {
    color: var(--docage-primary);
}

.fc-docage-light {
    color: var(--docage-primary-light-50);
}

.fc-signature {
    color: var(--docage-secondary);
}

.fc-signature-light {
    color: var(--docage-secondary-light-50);
}

.fc-portal {
    color: var(--portal);
}

.fc-portal-light {
    color: var(--portal-light);
}

.fc-contact {
    color: var(--contact);
}

.fc-contact-light {
    color: var(--contact-light);
}

.fc-mail {
    color: var(--mail);
}

.fc-mail-light {
    color: var(--mail-light);
}
/*#endregion Personnalisation des couleurs pour Docage*/

/*To keep the validate button at the bottom of the tab*/
/*.tabFooter {
    position: absolute;
    bottom: 30px;
    width: 100%;
}*/


.dx-treeview-item {
    color: rgba(0, 0, 0, 0.54);
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link, .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-datagrid-invalid) {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.75);
}

/*Personnalisation du file uploader

.dx-fileuploader-input-wrapper {
    height: 270px;
}
*/

/*#region Personnalisation des onglets TabPanel*/
.dx-tab {
    padding: 6px 20px;
    min-width: 90px;
    background-color: rgba(255,255,255, 0.75) !important;
    color: var(--docage-dark);
    border-radius: var(--radius) 0 var(--radius) 0;
}
    .dx-tab-selected {
        background-color: var(--docage-primary-light-50) !important;
        color: var(--docage-light) !important;
    }
.dx-tabs.dx-tabs-vertical {
    border-radius: var(--radius) 0 0 var(--radius) !important;
}
.dx-tabs-vertical .dx-tab-selected {
    border-radius: 0 0 0 0 !important;
}
.dx-tabs-vertical .dx-tabpanel-tab.dx-tab-selected {
    border-radius: var(--radius) 0 0 var(--radius) !important;
}
/*Pour ne modifier que le premier onglet*/
/*.dx-tabs-vertical .dx-tabpanel-tab.dx-tab-selected:first-of-type {
    border-radius: var(--radius) 0 0 var(--radius) !important;
}*/


#tabPanelHome .dx-tab {
    margin-right:5px;
    margin-bottom:5px;
}
#tabPanelHome .dx-tab.dx-tab-selected:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 0px;
    left: 0;
    right: 0;
    background-color: #ffffff;
}
/*Suppression ligne de soulignement de l'onglet sélectionné*/
.dx-tabs-styling-mode-primary.dx-tab-indicator-position-bottom .dx-tab-selected::after {
    height:0px;
}

.dx-tabs-wrapper {
    background-color: #f5f5f5;
}

/*#endregion Personnalisation des onglets*/
.dx-multiview-item {
    height: calc(100% - 16px);
}
.dx-multiview-item.dx-item-selected {
    position: absolute !important;
}

/*Exception pour les onglets dans les popup sinon le contenu du tabpanel est de 0*/
.dx-popup-content .dx-multiview-item.dx-item-selected {
    position: relative !important;
}
.dx-tag-content{
    font-size:0.75rem;
}
/*#region Personnalisation des tagBox dans les grids */
[class^=tagBoxForBoxesInGrid] .dx-tagbox.dx-editor-filled .dx-tag-container,
[class^=tagBoxForBoxesInGrid] .dx-tagbox.dx-editor-outlined .dx-tag-container {
    padding: 0px 0.3rem 0.5rem 0px;
    min-height: 3rem;
}
.tagBoxForBoxesInGrid .dx-tag:hover .dx-tag-content {
    background-color: rgba(255, 255, 255, 0.9);
    color: #677d8a;
}
.tagBoxForBoxesInGrid .dx-texteditor.dx-editor-filled {
    background-color: var(--docage-primary-light-50);
    border-radius: 1rem;
    margin: 10px;
}


.tagBoxForBoxesInGrid,
.tagBoxForBoxesInGrid .dx-selectbox-container,
.tagBoxForBoxesInGrid .dx-texteditor-container {
    background-color: transparent;
}

.tagBoxForBoxesInGrid .dx-texteditor.dx-editor-filled.dx-state-hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/*Suppression du soulignement*/
[id^=tbBoxes].dx-texteditor.dx-editor-filled::after {
    border-bottom: 0px solid rgba(0,0,0,.1) !important;
}

.tagBoxForBoxesInGrid .dx-tag-content {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #677d8a;
    color: #677d8a;
    border-radius: 1rem;
}

.tagBoxForBoxesInGrid .dx-tag-remove-button:before {
    color: #677d8a;
    background-color: rgba(255, 255, 255, 0.9);
}

.tagBoxForBoxesInGrid .dx-placeholder {
    color: rgb(124, 185, 9);
}


.tagBoxForRecipientsInGrid .dx-tag-content {
    padding-inline-end: 0.5rem;
}
[id^=tagBoxRecipients].dx-texteditor.dx-editor-filled::after {
    border-bottom: 0px solid rgba(0,0,0,.1) !important;
}
[id^=tagBoxRecipientsTo] .dx-tag-content {
    background-color: var(--docage-secondary-light-75);
    color: white;
}
.recipient-to {
    background-color: var(--docage-secondary-light-75);
    color: white;
}
[id^=tagBoxRecipientsCc] .dx-tag-content {
    background-color: var(--orange-75);
    color: white;
}
.recipient-cc {
    background-color: var(--orange-75);
    color: white;
}
[id^=tagBoxRecipientsBcc] .dx-tag-content {
    background-color: var(--docage-primary-light-50);
    color: white;
}
.recipient-bcc {
    background-color: var(--docage-primary-light-50);
    color: white;
}
[id^=tagBoxMailFiles] .dx-tag-content {
    background-color: var(--docage-primary-light-50);
    color: white;
}
/*#endregion Personnalisation des tagBox dans les grids */

/*#region Personnalisation des tagBox dans les details */
[id^=tagBoxForBoxesInDetails] {
    box-shadow : var(--dug-shadow);
}

[id^=tagBoxForBoxesInDetails].dx-tagbox.dx-editor-filled .dx-tag-container,
.dx-tagbox.dx-editor-outlined .dx-tag-container {
    padding: 0.5rem !important;
}
[id^=tagBoxForBoxesInDetails].dx-texteditor.dx-editor-filled::after {
    border-bottom: 0px solid rgba(0,0,0,.1) !important;
}

    [id^=tagBoxForBoxesInDetails].dx-texteditor.dx-editor-filled {
        /*background-color: var(--docage-tertiary-light-25);*/
        background-color: rgb(247, 247, 247);
        border-radius: 1rem;
        margin-bottom: 10px;
    }

[id^=tagBoxForBoxesInDetails].dx-texteditor.dx-editor-filled.dx-state-hover {
    background-color: transparent;
}

[id^=tagBoxForBoxesInDetails] .dx-tag-content {
    background-color: var(--docage-tertiary-light-50);
    color: #fff;
    border-radius: 1rem;
    box-shadow: var(--emerged-shadow);
}
[id^=tagBoxForBoxesInDetails] .dx-tag:hover .dx-tag-content{
    background-color: var(--docage-tertiary);
    color: #fff;
}

[id^=tagBoxForBoxesInDetails] .dx-tag-remove-button:before {
    /*color: var(--docage-tertiary-light-50);*/
    background-color: var(--docage-tertiary);
}

[id^=tagBoxForBoxesInDetails] .dx-placeholder {
    color: var(--docage-tertiary);
}

/*Suppression du soulignement*/
[id^=tagBoxForBoxesInDetails].dx-texteditor.dx-editor-underlined::after {
    border-bottom: 0px solid rgba(0,0,0,.1) !important;
}

[id^=toolbarFields] {
    background-color:transparent;
}

/*#endregion Personnalisation des tagBox dans les details */
.dx-checkbox-checked .dx-checkbox-icon {
    color: #fff;
    background-color: var(--docage-primary-light-75);
}

.dx-checkbox-indeterminate .dx-checkbox-icon {
    background-color: var(--docage-primary-light-75);
}
.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
    background-color: var(--docage-primary-light-75);
}
.dx-radiobutton-icon-checked {
    border-color: var(--docage-primary-light-75);
}

.dx-tab-content, .dx-tab-text, .dx-button-text {
    text-transform: none !important;
}

.dx-field-item-help-text {
    color: rgba(0, 0, 0, 0.4);
}
/*[id^=grid] .dx-scrollable-scroll {
    width: 10px;
}*/
[id^=grid] .dx-scrollable-scrollbar.dx-widget.dx-scrollbar-vertical > .dx-scrollable-scroll {
    width: 10px;
}

/*[id^=grid] .dx-scrollable-scrollbar.dx-widget.dx-scrollbar-horizontal > .dx-scrollable-scroll {
    height: 10px;
}*/

[id^=tvDynamicFields] .dx-scrollable-scroll {
    width: 10px;
}

.dx-form-group-caption {
    font-size: 1.1rem;
    color: black;
}
/*#region dxAccordion */
/*.dx-item-content.dx-accordion-item-body {
    padding: 0;
    margin: 0;
}

.dx-item-content.dx-accordion-item-title {
    padding: 0;
    margin: 0;
}*/
/*#endregion */
/*[id^=tabPanelTransaction] .dx-multiview-item {
    overflow-y: auto;
}

.dx-item-content.dx-multiview-item-content {
    overflow-y: auto;
}*/
/* Change bootstrap navpanel color */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--docage-primary-light-50);
}

a {
    color: var(--docage-tertiary-light-50);
}

    a:hover {
        color: var(--docage-primary);
    }

/* Change Devextreme background color on tabs */
.dx-tabs-wrapper {
    background-color: transparent !important;
}

.dx-tabs {
    background-color: transparent !important;
    border-bottom : none !important;
}



/* When a tab is open, title style */
.boxTitle {
    font-weight: lighter;
    color: #706795;
    font-size: 20px;
    /*text-shadow: 1px 1px 1px #333;*/
    margin-bottom: 10px;
    text-align: center;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dx-buttongroup-mode-contained {
    box-shadow:unset;

}
    .dx-buttongroup-mode-contained .dx-button-mode-contained {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 3px 0px;
    }
/* for defaults filters buttons in dxDataGrid header */
/*.dx-datagrid-header-panel .dx-toolbar-before .dx-button {
    background-color: var(--docage-tertiary-light-50);
    color: white;
    border-radius: 25px;
    height: 30px;
    line-height: 2rem;
    font-size: 14px;
    font-weight: 400;
}*/

.dx-datagrid-header-panel .dx-toolbar-before .dx-button .dx-button-text {
    font-size: 0.8rem;
    font-weight: 200;
    line-height: initial;
}
.dx-button {
    height: 2rem;
}
    /*.dx-datagrid-header-panel .dx-toolbar-before .dx-state-hover, .dx-datagrid-header-panel .dx-toolbar-before .dx-state-focused {
    background-color: #669935;
}*/
    /* Devextreme Docage Theme override */
    .dx-widget {
    font-family: Roboto, RobotoFallback, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 200;
    border-radius: var(--radius) !important;
}

.dx-tab-content, .dx-tab-text {
    font-weight: lighter !important;
}

.principal-transaction-tab {
    font-weight: bolder;
}

.dx-datagrid-headers {
    color: var(--docage-secondary);
}

.dx-datagrid-table .dx-row > td {
    font-weight: 200 !important;
}

.dx-fa-button .dx-overlay-content .dx-fa-button-label-wrapper .dx-fa-button-label {
    background-color: var(--docage-secondary-light-75);
    color: rgb(255, 255, 255);
    border-radius: 12px 0 12px 0;
    font-size: 0.9rem;
}
.dx-fa-button.dx-fa-button-main .dx-overlay-content {
    min-width: 56px;
    max-height: 56px;
    background-color: var(--docage-secondary-light-75);
    color: #fff;
}
    .dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-edit-row) > td:not(.dx-focused) {
    background-color: var(--docage-secondary-light-50);
}

/* floating buton */
.dx-fa-button .dx-fa-button-icon img, .dx-fa-button .dx-fa-button-icon-close img {
    width: 70%;
}

.dx-button-text {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 200;
}

/* pour les filtres dans les datagrids */
div[id^="grid"] .dx-toolbar-before .dx-buttongroup-item .dx-button-content {
    background-color: white;
    color: rgba(0,0,0,.87);
}

div[id^="grid"] .dx-toolbar-before .dx-buttongroup-item.dx-item-selected .dx-button-content {
    background-color: var(--docage-primary-light-50);
    color: white;
}

div[id^="grid"] .dx-toolbar-before .dx-buttongroup-item {
    margin: 0 3px;
}

div[id^="grid"] .dx-toolbar-before .dx-buttongroup.dx-state-hover {
    background-color: white !important;
}

div[id^="grid"] .dx-toolbar-before .dx-buttongroup.dx-state-focused {
    background-color: white !important;
}
/* pour les filtres dans les datagrids */

.dx-datagrid-rowsview .dx-row.dx-group-row, .dx-row-focused {
    font-weight: 600;
}

.dx-htmleditor {
    border-color: white;
    -webkit-box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0%) !important;
}

.dx-htmleditor-toolbar-separator {
    border-left-color: transparent;
}

.dx-scrollable-scroll {
    z-index: 3000;  /* Nous devons faire ça pour éviter la disparition des scrollbars */
}

.dx-tab-selected {
    background-color: var(--docage-primary-light-50) !important;
}
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td:not(.dx-validation-pending):not(.dx-datagrid-select-all).dx-command-select {
    padding-left:10px;
    padding-right:10px;
}
/*Suppression des lignes verticales dans les grids*/
.dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none {
    border-left: 0px;
    border-right: 0px;
}
.dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none {
    border-left: 0px;
    border-right: 0px;
}
.dx-datagrid .dx-datagrid-rowsview .dx-freespace-row td.dx-pointer-events-none {
    border-left: 0px;
    border-right: 0px;
}
/*Fin Suppression des lignes verticales dans les grids*/

/*Correction de la hauteur = 0 pour la drop zone de formbuilder*/
.fb-dropzone-new-field {
    min-height: 200px !important;
}

/* FORMBUILDER Ajout d'une scrollbar uniquement pour le formulaire */
.form-wrap.form-builder {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    max-height: 70vh;
}

    /* La zone stage-wrap (ul.frmb) scrolle verticalement */
    .form-wrap.form-builder .frmb.stage-wrap {
        overflow-y: auto !important;
        max-height: 70vh;
        flex: 1;
    }

    /* Le panneau de contrôles (palette à droite) reste sticky */
    .form-wrap.form-builder .cb-wrap {
        position: sticky !important;
        top: 0;
        align-self: flex-start;
        max-height: 70vh;
        overflow-y: auto;
    }

/* Le helper de drag (appendTo: body) reste visible au-dessus de tout */
body > .ui-sortable-helper,
body > li.ui-sortable-helper {
    z-index: 10000 !important;
    pointer-events: auto;
    opacity: 0.85;
    list-style: none;
    /* Reproduire le style de .frmb-control li qui est perdu hors du contexte .form-wrap */
    background: #fff;
    padding: 10px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 2px 2px 6px 0 #666;
    border: 1px solid #fff;
    cursor: move;
    font-family: Roboto, RobotoFallback, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 200;
    min-height: 38px !important;
    min-width: 212px !important;
}

/*Eloignement entre les champs et le sélecteur de champs dans les formulaires*/
.cb-wrap.pull-right {
    padding-left: 20px !important;
}

/*Suppression des espaces entre les champs d'un formulaire*/
.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: 0px;
}
/*Suppression des espaces entre les champs d'un formulaire pour les switch*/
.dx-field-item-label-location-top {
    padding-top: 0px;
}
.dx-texteditor.dx-editor-filled.dx-state-readonly .dx-texteditor-input {
    background-color:white;
}

/*Eclaircissement des lignes sous les champs d'un formulaire*/
.dx-texteditor.dx-editor-underlined::after {
    border-bottom: 1px solid rgba(0,0,0,.1);
}

/*Agrandissmeent des labels de tous les editeurs en mode Foating (14 au lieu de 12)*/
.dx-texteditor-label{
    font-size: 14px !important;
}
.dx-texteditor.dx-state-focused .dx-texteditor-label{
    font-size: 14px !important;
}
.dx-editor-outlined .dx-label span {
    font-size: 14px !important;
}
/* Pour le shake de la notificationBar */
.shake {
    -webkit-animation: shake;
    -webkit-animation-duration: 1s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

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

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

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

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

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

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

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

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

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

    90% {
        -webkit-transform: translate(2px, 2px) rotate(0deg);
    }

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

@media (max-width: 1365px) {
    [id^="gridTransaction"] .dx-toolbar-before {
        display: none;
    }
}

/* SelectBox Language */
.language-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-flag {
    font-size: 1.2em;
    min-width: 24px;
    text-align: center;
}

.language-name {
    flex: 1;
}

/* Style pour le TextBox dans le FieldTemplate */
.language-item .dx-textbox {
    flex: 1;
}

    .language-item .dx-textbox .dx-texteditor-input {
        padding-left: 0;
    }

/* Fin SelectBox Language */


/* Switch + label côte à côte même avec helpText (flatten du wrapper) */
.switch-left.dx-field-item,
.switch-left.dx-field-item.dx-flex-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* On “aplatit” le content-wrapper pour que switch et helpText deviennent des frères du label */
.switch-left .dx-field-item-content-wrapper {
    display: contents; /* permet de repositionner les enfants */
}

/* Switch (le bloc qui contient le composant) */
.switch-left .dx-field-item-content {
    order: 1;
    margin: 0;
    padding: 0;
}

/* Label à droite du switch */
.switch-left > .dx-field-item-label,
.switch-left > .dx-field-item-label.dx-field-item-label-location-top {
    order: 2;
    width: auto !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    align-self: center;
    white-space: nowrap;
}

/* HelpText sur une ligne complète en dessous */
.switch-left .dx-field-item-help-text {
    order: 3;
    flex: 0 0 100%;
    margin: 4px 0 0 0;
    text-align: left;
}

/* Nettoyage des paddings potentiels */
.switch-left .dx-toggle-controls-paddings,
.switch-left .dx-field-item-content-location-bottom {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

/* Alignement vertical cohérent si DevExtreme ajoute dx-label-v-align */
.switch-left.dx-label-v-align {
    align-items: center;
}

/* Fallback (si display: contents n’est pas supporté) : on force le wrapper en flex-row */
@supports not (display: contents) {
    .switch-left .dx-field-item-content-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .switch-left .dx-field-item-content {
        order: 1;
    }

    .switch-left > .dx-field-item-label {
        order: 2;
    }

    .switch-left .dx-field-item-help-text {
        order: 3;
        width: 100%;
        flex: 0 0 100%;
        margin-top: 4px;
    }
}


 /*Styles pour le InsertionPanel*/
.emerged {
    box-shadow: var(--emerged-shadow);
}
.dug {
    box-shadow: var(--dug-shadow);
}
.form-accordion {
    box-shadow: var(--dug-shadow);
    border-radius: var(--radius);
    padding: 1rem;
}
.accordion-header {
    margin-bottom: 0px;
}
.non-displayed {
    display: none;
}
div[id^="gridPeople"] .dx-datagrid-header-panel {
    padding: 0 !important;
}
    div[id^="gridPeople"] .dx-datagrid-header-panel .dx-datagrid-search-panel::after {
        border-bottom: none !important;
    }
    
div[id^="gridPeople"] .dx-toolbar-after {
    left: 3rem;
    width: calc(100% - 3rem);
}
    div[id^="gridPeople"] .dx-toolbar-after .dx-datagrid-search-panel {
        width: calc(100% - 1rem) !important;
    }
    /*On doit le répéter 2 fois pour qu'il s'impose*/
    div[id^="gridPeople"] .dx-toolbar-after .dx-datagrid-search-panel {
        width: calc(100% - 1rem) !important;
    }
div[id^="gridPeople"] .dx-datagrid-table {
    background-color: #f7f7f7;
}
    div[id^="gridPeople"] .dx-datagrid-table .dx-group-row {
        background-color: #f7f7f7 !important;
    }
        div[id^="gridPeople"] .dx-datagrid-table .dx-group-row .dx-group-cell p {
            margin-bottom: 0;
        }

/* Column Chooser styling */
.dx-datagrid-column-chooser > .dx-overlay-content {
    border-radius: var(--radius) !important;
    width: 400px !important;
}